The CSS Stripes Generator writes one background-image declaration built on repeating-linear-gradient, where one pattern period equals the stripe width plus the gap width and the output uses four explicit color stops with duplicate boundary positions so every band edge stays hard. The tool accepts five inputs: a CSS angle between zero and three hundred sixty degrees, two six-digit hexadecimal colors, and two finite positive band widths each clamped between one and two hundred pixels. After validation it sums the two widths into one period, then writes four stops that show one period plus a duplicate of both colors so the browser cannot blend the two bands at any boundary. The exact declaration drives the on-screen preview and the clipboard copy, so what you see is what you paste. Because everything runs in the current browser tab, no image asset, raster export, or third-party dependency is required to produce a sharp, repeating stripe background that scales cleanly across any container, and the output uses background-image rather than the background shorthand so an existing background color, size, or position is not reset.
What the Generator Produces
The single deliverable from the CSS Stripes Generator is one CSS declaration that can be pasted into any stylesheet or inline style. That declaration uses the background-image property with a repeating-linear-gradient() function, and it expresses a two-color pattern through four hard-edge color stops. The generator does not produce any other CSS: no positioning, no animation, no fallback, no conic or radial alternative, and no background-color reset. That narrow surface is intentional, because a single property can be inspected, audited, and replaced without disturbing the rest of a stylesheet.
The pattern is built from one period, where period = stripe width + gap width. Within that period the first stop fills the stripe band, the second stop fills the gap band, and the third and fourth stops repeat the same start positions so the browser draws a hard transition at every boundary instead of an interpolated blend. Because repeating-linear-gradient repeats the last stop interval in both directions along the gradient line, this hard-edge structure propagates across the entire painted area, no matter how large the element becomes.
The tool does not generate raster images, data URLs, SVG, or any external asset. Everything stays in the current tab: there is no upload, no storage, no login, and no third-party dependency. The on-screen preview uses the exact declaration that lands on the clipboard, so the preview, the calculation, and the pasted output are guaranteed to match.
Required Inputs and Valid Bounds
| Input | Format | Bound | Notes |
|---|---|---|---|
| Angle | Number, degrees | 0 to 360 inclusive | 0° points up, 90° points right, intermediate values create diagonals. |
| Stripe color | Six-digit hex (#RRGGBB) | Required, no shorthand | No alpha channel, no named color, no transparent. |
| Gap color | Six-digit hex (#RRGGBB) | Required, no shorthand | No alpha channel, no named color, no transparent. |
| Stripe width | Pixel value | 1 to 200 inclusive | Must be finite and positive; measured along the gradient line. |
| Gap width | Pixel value | 1 to 200 inclusive | Must be finite and positive; measured along the gradient line. |
Empty fields and non-finite numeric inputs are rejected by validation, which avoids accidental zero-length periods. Both widths being at least one pixel also guarantees that the four stops cover a positive distance, so the gradient line has somewhere to render. The two hundred-pixel upper bound keeps any single band from swallowing the entire preview while still leaving room for readable mid-size stripes. For more on how the gradient syntax itself behaves, the MDN reference for repeating-linear-gradient and the W3C CSS Images Level 3 specification describe the angle, gradient line, and repeated last interval in detail.
Build Stripes in Four Steps
- Set the CSS angle. Pick a value between 0 and 360. Use 0° for stripes that read horizontally, 90° for stripes that read vertically, and any intermediate value for diagonals.
- Choose the stripe and gap colors. Enter two complete six-digit hex values such as #0F4C81 and #F2F2F2. The tool does not accept shorthand, named, or transparent values, so pick colors that are already in the design palette.
- Adjust each band width and inspect the repeating period. Set the stripe width and the gap width in pixels. The preview tiles one period of stripe width + gap width; if a diagonal looks visually thinner or thicker than expected, that is because the width is measured along the gradient line rather than along a screen axis.
- Copy the background-image declaration and test it in context. Use the copy action to grab the exact background-image declaration, paste it into a real component, add a solid fallback color, and check the result across responsive sizes, zoom levels, and themes. Inspect the final container rather than the preview alone before shipping.
Anatomy of the Output Declaration
The output is one background-image declaration whose value is a single repeating-linear-gradient() call. Inside the call, the angle comes first, then four color stops in order. Consider a stripe width of ten pixels and a gap width of five pixels. The period is 10 + 5 = 15 pixels. The declaration shows one full period plus a duplicate of both colors so the browser cannot blend the band edges:
background-image: repeating-linear-gradient(45deg, #0F4C81 0 10px, #F2F2F2 10px 15px, #0F4C81 15px 25px, #F2F2F2 25px 30px);
Reading the stops from left to right:
- 0 to 10px: the stripe color fills the first band of the period.
- 10px to 15px: the gap color fills the second band of the period.
- 15px to 25px: the stripe color restarts at the duplicate position 15px and runs for another 10 pixels, so the next period begins with a hard edge instead of an interpolated blend.
- 25px to 30px: the gap color restarts at the duplicate position 25px and runs for another 5 pixels, again guaranteeing a hard edge.
Because repeating-linear-gradient repeats the last stop interval in both directions along the gradient line, the pattern continues with hard edges far beyond the 30-pixel window shown in the stops. Switching either band's start position to the same value as the previous end position is what keeps every boundary sharp. A longer walk through the same gradient logic lives in the CSS stripe pattern guide for readers who want to reason about the stops by hand.
Angle Reference and Diagonal Widths
| Angle | Gradient line direction | Typical visual result |
|---|---|---|
| 0° | Points upward (to top) | Vertical gradient line; bands run perpendicular to it. |
| 90° | Points rightward | Horizontal gradient line; bands run perpendicular to it. |
| 45° | Top-left to bottom-right | Diagonal gradient line; bands form a classic slanted stripe. |
| 135° | Top-right to bottom-left | Diagonal gradient line; mirrored slanted stripe. |
Widths in this generator are measured along the gradient line, not along the screen's horizontal or vertical axis. That means a 16-pixel band set at 45° will not occupy 16 horizontal or vertical pixels; its projected width on each screen axis will be smaller, and the projection changes with the chosen angle. The exact projected pixel count is not computed by the tool; it depends on the browser's rendering of repeating-linear-gradient at the angle selected, which is why the preview should always be checked at a representative element size rather than treated as a screen-axis measurement.
Limits and Validation Rules
Because the generator is intentionally narrow, several options that other pattern tools provide are not part of the contract. The tool will not produce transparent alpha, multiple intermediate colors, conic patterns, radial patterns, background-position offsets, or animation. The output is one static, deterministic, two-color stripe pattern each time, and any further styling has to come from the rest of the stylesheet.
Other limits to keep in mind when planning a pattern:
- Both band widths must be at least 1 pixel and at most 200 pixels. Values outside that range are not accepted.
- Both colors must be complete six-digit hexadecimal values with the leading hash; shorthand like #fff and named colors are not accepted.
- Empty inputs and non-finite numeric inputs are flagged as errors so a zero-length period cannot be produced by accident.
- Very small bands (around 1 to 2 pixels) can produce moiré, shimmer during scrolling, or an unstable appearance under browser zoom and screenshots.
- Very large bands (close to 200 pixels) can stop reading as a repeating pattern and begin to look like a pair of flat color blocks.
Because the output uses background-image rather than the background shorthand, it does not reset an existing background-color, background-size, or background-position. If the target element already has multiple background layers, the new declaration still needs to be ordered correctly within the comma-separated list.
Placement, Contrast, and Accessibility
A repeating stripe is a strong visual texture, and that strength can work against readability. Contrast between the two band colors is constant at the band interior but visually drops to whatever the page background is at each band boundary, so any text placed directly over a strong stripe inherits a noisy reading surface. Add a solid overlay or a contained reading surface, such as a card, a panel, or a translucent block, before placing long passages over the pattern.
Stripe direction and color should never be the only signal that conveys status. A loading bar that relies on stripe direction to mean running becomes invisible in forced-colors mode, in monochrome printing, and to anyone using a screen reader. Pair any directional or color cue with a label, an icon, or a text description that survives without the pattern.
Patterns also deserve a quick environmental check before shipping. Test forced-colors mode, dark themes, browser zoom, print, and screenshots. If the background moves or animates, respect prefers-reduced-motion and measure paint behavior, because a static decorative stripe is usually safer and clearer than a moving one. None of this is enforced by the generator itself, so these checks belong in the integration step where the declaration is pasted into the real component. Once the declaration is in production, replace the literal hex values and pixel widths with the design tokens the codebase already uses.
For a deeper look, see Camel Case to Snake Case Cheat Sheet: Six Naming Styles.