A repeating-linear-gradient declaration with four hard-edge color stops creates deterministic CSS stripes that remain sharp at any zoom level and scale across large surfaces without downloading a raster image. CSS Stripes Generator lets you set an angle from 0 to 360 degrees, choose two six-digit hex colors, and adjust the stripe and gap widths in pixels. The tool adds the two widths to form one pattern period, then writes four explicit stops: the first color from zero to the stripe boundary and the second color from that boundary to the end of the period. Because both colors appear twice at each boundary, the browser switches instantly without blending, producing clean edges. The preview uses the exact repeating-linear-gradient value that you copy, so what you see matches the final output. This approach avoids the moiré and shimmer that can occur with very small bands or the loss of pattern recognition with very large bands. Everything runs in the current tab without uploads, storage, login, or added dependencies, and the output uses background-image rather than the background shorthand, reducing the chance of resetting an existing background color or position. Try the CSS Stripes Generator to do this in your browser.
Why CSS Stripes Need Hard-Edge Stops
Standard linear gradients blend colors across the entire gradient line, creating soft transitions. When you want crisp stripes, you need hard edges—sharp boundaries where one color ends and the next begins. The CSS Stripes Generator achieves this by repeating each color at the same position in the stop list. For example, if you set a 10-pixel stripe and a 5-pixel gap, the tool calculates a 15-pixel period and writes four stops: the stripe color at 0% and 66.67% (10/15), and the gap color at 66.67% and 100%. The browser sees two identical positions and switches instantly, producing a clean edge. Without these duplicate stops, the browser would blend the colors over a small distance, softening the stripe. This method is documented in the W3C CSS Images Level 3 specification and the MDN repeating-linear-gradient reference, which explain how repeating gradients extend the final color-stop interval in both directions along the gradient line.
How Angles and Widths Affect Visible Spacing
Stripe widths are measured along the gradient line, so their horizontal and vertical projection changes with the selected angle. A 0° angle points upward, meaning a 16-pixel stripe occupies 16 vertical pixels but stretches infinitely horizontally. A 90° angle points right, so the same 16-pixel stripe occupies 16 horizontal pixels. At 45°, the stripe occupies roughly 11.3 pixels along both axes (16 × √2/2). This projection effect means the visible spacing across the screen changes with angle, even when the numeric width stays the same. The CSS Stripes Generator preview shows the exact repeating-linear-gradient at a representative element size, but you should always check the final container rather than treating the numeric width as a screen-axis measurement. If you need consistent horizontal spacing regardless of angle, adjust the stripe and gap widths while watching the preview.
| Angle (degrees) | Gradient Line Direction | Visible Spacing Effect |
|---|---|---|
| 0 | Upward | Stripe width equals vertical pixels; horizontal spacing is infinite. |
| 90 | Rightward | Stripe width equals horizontal pixels; vertical spacing is infinite. |
| 45 | Diagonal (top-left to bottom-right) | Stripe width projects equally along both axes; visible spacing is reduced by √2. |
| 135 | Diagonal (top-right to bottom-left) | Same projection as 45° but mirrored. |
Create a CSS Stripe Pattern in Four Steps
- Set the CSS angle for the stripe direction. Enter a value between 0 and 360 degrees. Zero points upward, ninety points right, and intermediate values create diagonals. The preview updates immediately.
- Choose the stripe and gap colors. Enter two complete six-digit hexadecimal values (e.g., #ff5733 and #33ff57). The tool validates the format and shows the colors in the preview.
- Adjust each band width and inspect the repeating period. Set the stripe and gap widths in pixels, from 1 to 200. The tool adds the two widths to form one pattern period and updates the preview. Very small bands may cause moiré; very large bands may stop reading as a repeating pattern.
- Copy the background-image declaration and test contrast and zoom in the real component. Click the copy button to place the exact repeating-linear-gradient value on your clipboard. Paste it into your stylesheet, add a solid fallback background if needed, and check text contrast, responsive sizes, and zoom behavior in the actual component. Avoid placing long text directly over strong patterns without a solid overlay.
When to Use a Solid Overlay or Fallback
Patterned backgrounds can interfere with text and controls, especially when contrast varies across the bands. Rapid stripes can create visual stress, and some users may experience discomfort or reduced readability. The CSS Stripes Generator does not check text contrast over the pattern—you must test it yourself. If you place text or interactive elements over the stripes, add a solid overlay or contained reading surface and verify contrast across the entire area. Test forced colors, dark themes, zoom, print, screenshots, and motion contexts. If the background moves, respect reduced-motion preferences and measure paint behavior; a static decorative pattern is usually safer and clearer. For status signals, avoid relying solely on stripe direction or color—use additional indicators like icons or labels.
How the Output Handles Multiple Background Layers
The CSS Stripes Generator outputs a single background-image declaration rather than the background shorthand. This reduces the chance of resetting an existing background color, size, or position. If you need multiple background layers, you must combine them manually. The order of layers in the background-image property matters: the first layer is closest to the viewer, and subsequent layers appear behind it. For example, if you want a solid color behind the stripes, write:
background-image: repeating-linear-gradient(45deg, #ff5733 0 10px, #33ff57 10px 15px), linear-gradient(#ffffff, #ffffff);Always test the final appearance in the real component, as layer ordering and stacking contexts can affect visibility. Replace literal colors or dimensions with established design tokens where appropriate to maintain consistency across your project.