Stripe Pattern
Make a stripe pattern from 2 to 8 stripes: choose each colour and width in millimetres, inches or pixels, turn the stripes to any angle and mirror the sequence if you like. Download a seamless SVG tile, a 300 DPI PNG, a PDF at full size with a stripe key, or copy the CSS background for a website. Pinstripe and Breton presets use widths from dated definitions; every other preset is simply named by what it is. Every stripe is exactly the width you type, measured square to the stripes, the tile repeats edge to edge at every angle and the CSS draws the same stripes as the SVG (all tested). Nothing is uploaded.
100% private — everything runs in your browser. Everything runs in your browser; nothing is uploaded.
Page 1 is the pattern at full size with a 1 in test square; page 2 is the stripe key: one repeat at full size, every colour and width. The SVG tile repeats edge to edge at any angle.
Stripes
Runs in your browser with our own code: nothing is uploaded or saved. You may use what you make here, including commercially, with no credit needed.
How to make a stripe pattern
- Choose a preset or the number of stripes in the repeat.
- Pick each colour and type each width; choose mm, inches or px.
- Set the angle (0 for horizontal stripes, 90 for vertical) and tick Mirror for a symmetrical sequence.
- Download the SVG tile for fabric, wallpaper or print, or copy the CSS for a web background.
- For paper, download the PDF: page 1 is the pattern at full size, page 2 the stripe key with every width.
What you can use it for
- Fabric, gift wrap and scrapbook paper
- Painted stripe walls and furniture (stripe key with widths)
- Website, slide and app backgrounds (CSS or SVG tile)
- Knitting, weaving and sewing colour plans
- Party, nursery and shop decor
- Mock-ups of shirts, awnings and bags
The 14 presets
| # | Preset | Stripes | Repeat | Angle | Seamless tile |
|---|---|---|---|---|---|
| 1 | Two colours, equal widths | 2 | 40 mm | 0° | 40 × 40 mm |
| 2 | Pinstripe (1/30 in lines, 1/2 in apart) | 2 | 0.5 in | 90° | 0.5 × 0.5 in |
| 3 | Breton (navy 10 mm, white 20 mm) | 2 | 30 mm | 0° | 30 × 30 mm |
| 4 | Vertical, equal widths | 2 | 2 in | 90° | 2 × 2 in |
| 5 | Diagonal 45° | 2 | 20 mm | 45° | 28.28 × 28.28 mm |
| 6 | Diagonal 30°, three colours | 3 | 30 mm | 30° | 60 × 34.64 mm |
| 7 | Thick and thin | 4 | 38 mm | 0° | 38 × 38 mm |
| 8 | Mirrored four-stripe sequence | 6 (mirrored) | 42 mm | 0° | 42 × 42 mm |
| 9 | Six-colour rainbow | 6 | 60 mm | 0° | 60 × 60 mm |
| 10 | Pastel four colours, vertical | 4 | 60 mm | 90° | 60 × 60 mm |
| 11 | Double lines (narrow pairs) | 4 | 24 mm | 0° | 24 × 24 mm |
| 12 | Black and white, 5 mm | 2 | 10 mm | 0° | 10 × 10 mm |
| 13 | Eight-step blue fade (mirrored) | 14 (mirrored) | 84 mm | 0° | 84 × 84 mm |
| 14 | Web background, 10 px at 135° | 2 | 20 px | 135° | 28.28 × 28.28 px |
Each preset only fills in the fields; change any width, colour or angle afterwards.
Seamless tile size by angle (a 20 mm repeat: 10 mm + 10 mm)
| Angle | Tile across | Tile down | CSS gradient angle |
|---|---|---|---|
| 0° | 20 mm | 20 mm | 180deg |
| 15° | 77.27 mm | 20.71 mm | 165deg |
| 30° | 40 mm | 23.09 mm | 150deg |
| 45° | 28.28 mm | 28.28 mm | 135deg |
| 60° | 23.09 mm | 40 mm | 120deg |
| 75° | 20.71 mm | 77.27 mm | 105deg |
| 90° | 20 mm | 20 mm | 90deg |
| 120° | 23.09 mm | 40 mm | 60deg |
| 135° | 28.28 mm | 28.28 mm | 45deg |
Between 0° and 90° the tile gets longer as the angle nears horizontal or vertical; the maker refuses angles within 1° of them, where the tile would be very long.
Named stripes and the widths used
| Name | Definition used | Preset widths | Source |
|---|---|---|---|
| Pinstripe | very thin stripes, about 1/30 in (0.85 mm) wide | 0.85 mm + 11.85 mm = 12.7 mm | Wikipedia, Pinstripe (last edited 14 Mar 2026) |
| Breton | white stripes twice as wide as the navy stripes, navy 10 mm spaced 20 mm apart | 10 mm + 20 mm = 30 mm | Wikipedia, Breton shirt (last edited 25 Apr 2026) |
Other presets are named by their shape only. Change a width and the name is dropped from the key.
Repeats per metre and per yard
| Repeat (measured square to the stripes) | Repeats per metre | Repeats per yard | Same repeat in CSS px |
|---|---|---|---|
| 5 mm (0.2 in) | 200 | 182.88 | 18.9 px |
| 10 mm (0.39 in) | 100 | 91.44 | 37.8 px |
| 20 mm (0.79 in) | 50 | 45.72 | 75.59 px |
| 30 mm (1.18 in) | 33.33 | 30.48 | 113.39 px |
| 40 mm (1.57 in) | 25 | 22.86 | 151.18 px |
| 50 mm (1.97 in) | 20 | 18.29 | 188.98 px |
| 100 mm (3.94 in) | 10 | 9.14 | 377.95 px |
Which tool to use
| You want | Use |
|---|---|
| Straight stripes at any angle, exact widths, CSS | Stripe Pattern (this page) |
| Zigzag stripes | Chevron Pattern Generator |
| Woven checks from crossing stripes | Gingham Pattern Generator |
| Tartan and plaid setts | Plaid Pattern Generator |
| Shaded cube repeats | Cube Pattern |
Also handy: the Chevron Pattern Generator, the Gingham Pattern Generator and the Plaid Pattern Generator.
More free tools
More pattern and print tools?
Pattern makers and print tools that run privately in your browser, with no sign-up and no watermark.
Frequently asked questions
What is a stripe pattern?
A repeat of parallel bands of colour. One repeat is the sequence of stripes, and the pattern is that sequence over and over. This maker lets you set every stripe in the repeat.
How wide is a pinstripe?
Very thin: about 1/30 inch (0.85 mm), according to the definition we use (dated in our notes). The spacing between the lines is not fixed; the preset uses 1/2 inch, and you can change it.
What are Breton stripes?
The navy and white stripes of the French sailor shirt. The 1858 rule gave white stripes twice as wide as the navy ones; the preset uses navy stripes 10 mm wide spaced 20 mm apart.
Will the stripes tile at an angle?
Yes. For stripes at an angle the tile is the repeat divided by the sine of the angle across and by the cosine down, so copies placed edge to edge join with no seam at every angle. The table above shows the tile size for common angles.
Does the CSS match the SVG?
Yes. The CSS uses a repeating linear gradient with hard colour stops at the same stripe edges, turned to the same angle, with the background size set to the seamless tile. Our tests compare the two point by point.
What does Mirror do?
It plays the sequence forward, then the inner stripes backward: A B C D becomes A B C D C B. The first and last stripes are the mirror lines, so every width stays as you typed it.
How do I paint stripes on a wall?
Download the PDF and use page 2, the stripe key: it lists every stripe in order with its width in mm and inches and where it starts and ends in the repeat. Measure square to the stripes from your starting line.
How is this different from the chevron and gingham generators?
Chevron stripes zigzag, and gingham crosses two sets of stripes into checks. This page makes straight stripes in one direction, at any angle, with exact widths, a stripe key and CSS.
Is it free?
Yes. There is no sign-up, no watermark and no limit.
Is anything uploaded?
No. Everything is drawn by JavaScript in your browser and nothing is sent anywhere.