A repeating-linear-gradient with four hard color stops placed at zero, the stripe boundary, that boundary repeated, and the end of the period builds a CSS stripe pattern that repeats exactly every stripe-plus-gap pixels along the gradient line. A 10-pixel stripe followed by a 5-pixel gap produces a 15-pixel period, and that period is the single unit the browser tiles across the element in both directions of the gradient line. Because every value is a numeric length rather than a raster image, the pattern stays sharp at any browser zoom, on high-density displays, and inside containers that scale with viewport or font size. The trade-off is that the math is unforgiving: empty inputs, zero widths, or non-finite numbers abort the calculation so the tool never writes a degenerate declaration with no period at all.
Stripes built this way are deterministic in a way that image backgrounds cannot match. Set an angle, two colors, and two band widths, and the result is fixed before it touches the cascade. No PNG has to be regenerated for a brand refresh, no SVG has to be re-exported when the container changes, and no CDN has to serve an asset that the browser could compute from less than a hundred characters of CSS. The cost of that determinism is a small vocabulary of inputs: angle, stripe color, gap color, stripe width, and gap width. Anything outside that vocabulary, including transparent alpha, three or more colors, conic shapes, radial falls, background positioning, and animation, is intentionally omitted so the declaration stays auditable line by line.
What a CSS stripe pattern generator actually controls
Five inputs drive the entire output: the angle in CSS degrees, a six-digit stripe color, a six-digit gap color, the stripe width in pixels, and the gap width in pixels. The CSS Stripes Generator validates each one, refuses zero or non-finite numbers, and caps both band widths between one and two hundred pixels. Outside those bounds the pattern either collapses into a flat fill or stops reading as a repeating stripe at all.
The angle uses the CSS degree scale from zero through three hundred sixty. Zero points upward along the gradient line, ninety points to the right, one hundred eighty points down, and two hundred seventy points left. Intermediate values create diagonals, which is where most stripe layouts live because pure vertical and pure horizontal stripes feel like ruled paper rather than background texture.
| Input | Type | Allowed range | Effect on the declaration |
|---|---|---|---|
| Angle | CSS degrees | 0 to 360 | Direction the gradient line points |
| Stripe color | Hex | Six digits (RRGGBB) | Color from 0 to the stripe boundary |
| Gap color | Hex | Six digits (RRGGBB) | Color from the stripe boundary to the period |
| Stripe width | Pixels | 1 to 200 | Length of the colored band along the gradient line |
| Gap width | Pixels | 1 to 200 | Length of the empty band along the gradient line |
The four-stop rule is the core mechanic. The browser receives repeating-linear-gradient(angle, color1 0, color1 stripeWidth, color2 stripeWidth, color2 stripeWidth+gapWidth). The duplication at the boundary position is what keeps the transition hard. If the second stripe stop and the first gap stop sat at the same length, the browser would switch directly from one color to the other with no blend, and that is exactly what a stripe needs.
Create a CSS stripe pattern in five steps
The following sequence produces a single background-image declaration that drops into any element. Each step writes one part of the gradient, and the live preview is the same string that lands on the clipboard.
- Set the CSS angle for the stripe direction. Pick 0 for horizontal stripes, 90 for vertical stripes, or any value in between for diagonals.
- Choose the stripe and gap colors. Enter both as complete six-digit hexadecimal values such as #1f2937 and #f9fafb. Shorthand three-digit hex is intentionally not accepted.
- Adjust each band width and inspect the repeating period. The period equals the stripe width plus the gap width, so a 10-pixel stripe and a 5-pixel gap yield a 15-pixel period. The preview tiles that single period across the gradient line.
- Copy the background-image declaration and test contrast and zoom in the real component. Open the component the stripes will live in, resize it, screenshot it, and zoom the page before shipping.
- Replace literal colors and dimensions with your design tokens where appropriate, then add a solid fallback color so the layout still reads if the declaration is stripped or fails to parse.
For a worked numeric example, take a 16-pixel stripe and a 4-pixel gap. The period is 16 + 4 = 20 pixels along the gradient line. The declaration reads:
background-image: repeating-linear-gradient( 45deg, #1f2937 0, #1f2937 16px, #f9fafb 16px, #f9fafb 20px );
The browser tiles this 20-pixel period infinitely in both directions of the 45-degree gradient line, which is what gives diagonal stripes their even texture without visible seams.
Why diagonal stripes change the visible spacing
Widths in a CSS stripe pattern are measured along the gradient line, not along the screen axes. A 16-pixel diagonal band does not occupy 16 horizontal pixels on screen, because the gradient line runs at 45 degrees and the horizontal projection of that 16-pixel length is shorter. At 45 degrees, the same length projects equally across and down the page. Anyone measuring stripes with a screen ruler will get a number that depends on the ruler angle, not on the declaration.
This is the practical reason to preview stripes inside a representative element. A sidebar at 240 pixels wide reads very differently from a hero at 1200 pixels wide, even when both use the same 16-pixel stripe width at the same angle. The narrower container may show only two or three periods across, while the wider one shows a dozen, and the perceived rhythm changes accordingly. The generator applies the same repeating-linear-gradient string it copies, so the preview is a faithful image of what the real element will render.
Color stops, hard edges, and the four-stop rule
A soft stripe pattern blends one band into the next, which is almost never what designers want. Hard edges come from placing both the last stripe color stop and the first gap color stop at exactly the same length. The browser reads that as a direct switch with no transition. The four-stop declaration, color at 0, color at the stripe width, the second color at the stripe width, and the second color at the period, guarantees that boundary every time.
This matters because the gradient line in CSS images repeats the final color-stop interval indefinitely, a behavior documented in the W3C CSS Images Level 3 specification and the MDN repeating-linear-gradient reference. If the final stop were at, say, fifteen pixels and the second color only extended to twelve, the browser would blend from twelve to fifteen with a third implied color. Repeating that blend across thousands of tiles produces a noticeable shimmer on scrolling pages, and the moire shows up worst under high browser zoom. The four-stop pattern keeps every boundary hard, which is also why the preview and the clipboard output never disagree: they are literally the same string.
Common stripe pattern mistakes that break the repeat
A few failure modes come up repeatedly when authors hand-write gradient declarations, and a generator catches each one before it reaches the stylesheet.
Setting one band width to zero is the most common. A 0px stripe or gap collapses the period to the width of the remaining band, and the browser fills the element with a single flat color. The generator refuses zero widths to avoid an accidental zero-length period.
Using three-digit shorthand hex is the second. Browsers accept #fff, but the generator requires six digits so the serialized declaration always has a stable form. That stability lets a build pipeline search, replace, and lint the values without false negatives.
Letting the pattern carry meaning is a subtler issue. Diagonal stripes can read as warning, decoration, or status depending on context. The pattern itself should not be the only signal, because users with low vision, high zoom, or forced-colors mode may not perceive the direction or rhythm. Always pair the background with a foreground label, an icon, or a text value.
Skipping a solid fallback is the last. If background-image is stripped by a content-security policy, removed by an optimizer, or overridden by a user stylesheet, the element will inherit whatever sits behind it. A solid background-color on the same selector keeps the layout readable in those cases without competing with the stripes when they render.
Putting the CSS stripe pattern to work
The output of the generator is a single background-image declaration, not a background shorthand. That separation matters because the shorthand resets background-color, background-size, and background-position if those values are not repeated. Leaving them in place lets a header bar, a callout panel, or a settings card keep its padding, hover state, and typography untouched while only the texture changes.
Multiple layers still need attention. CSS background layers stack in document order with the first layer on top, so a striped background-image followed by a transparent overlay needs the overlay to come first in the list. For text on a busy pattern, the safest move is a solid reading surface, such as a card, a panel, or a translucent overlay with verified contrast, rather than relying on local contrast that varies band by band. Browsers, screen readers, and reduced-motion users all benefit when the decorative layer stays decorative.
Very small bands can produce moire, shimmer during scrolling, or unstable appearance under browser zoom and screenshots. Very large bands may stop reading as a repeating pattern at all. Test forced colors, dark themes, zoom, print, screenshots, and motion contexts before treating a stripe layout as production-ready, and respect reduced-motion preferences if the background ever moves. A static decorative pattern is usually safer and clearer than an animated one, which is also why the generator intentionally omits animation from the input vocabulary.
For a deeper look, see CSS Glass Effect: Backdrop Filter, Alpha, and Border Right.