CSS Stripe Generator
Create striped backgrounds with intuitive controls.
Adjust color, width, opacity, and angle, then copy ready-to-use code.
This tool has been used … times.
background: repeating-linear-gradient(90deg, ...);
×
px
Presets
Stripes
How to Use the CSS Code
Paste the copied code straight into the CSS of the element you want to style.
Example: applying it to a button background
.my-button { /* paste the generated code */ background: repeating-linear-gradient(90deg, #111827 0 16px, #f9fafb 16px 32px); /* other styles */ color: #111827; border: none; font-family: inherit; }
You can also switch to `background-image` before copying.
How repeating-linear-gradient Works
The generated code has the form
repeating-linear-gradient(angle, color1 start end, color2 ...).
Each band is defined by “color, start px, end px”, and the set up to the last stop repeats to make the stripe pattern.
Reading the code
background: repeating-linear-gradient(90deg, #111827 0 16px, #f9fafb 16px 32px);
- 90deg … the stripe direction. 0deg runs bottom to top, 90deg runs left to right.
- #111827 0 16px … fills from 0px to 16px with the dark color.
- #f9fafb 16px 32px … fills from 16px to 32px with the light color, then repeats every 32px.
Smaller values make tighter stripes; larger values make thicker ones. The Scale control above scales all of these values up or down at once.
Tips for Better Stripes
Vary the widths
Mixing thick and thin bands gives a more characterful background than plain, even borders.
Mixing thick and thin bands gives a more characterful background than plain, even borders.
Change the mood with angle
90deg gives vertical stripes, 180deg gives horizontal ones, and around 45deg adds a sense of movement.
90deg gives vertical stripes, 180deg gives horizontal ones, and around 45deg adds a sense of movement.
Use opacity too
Lowering the opacity of a few bands helps them blend with a base color or a photo underneath.
Lowering the opacity of a few bands helps them blend with a base color or a photo underneath.