If narrow diagonal stripes made with repeating-linear-gradient() look uneven, try a regular linear-gradient() with a carefully sized background-size so the image tiles. It takes more geometry to set up, but Chris Coyier describes this approach as more robust for the angled stripe examples in his CSS-Tricks article. It is a targeted workaround, not a rule that repeating gradients always render badly.
Why narrow diagonal stripes can look uneven
In a repeating-linear-gradient(), one or two narrow stripes may appear lighter or thinner than their neighbors. Coyier reported that this was easy to reproduce in his examples and less noticeable with thicker stripes—around 5px or more. That threshold is a qualitative observation, not a guaranteed cutoff or a measurement across browsers.
His example uses a 45-degree gradient with a 10px black section followed by a 1px dark-gray section:
background: repeating-linear-gradient(
45deg,
black,
black 10px,
#444 10px,
#444 11px
);Coyier suggests subpixel rendering as a possible factor. A reader’s geometric explanation is that angled boundaries can land at different fractional positions on horizontal and vertical pixel axes. The article presents this as an explanation, not a proven universal cause; browser rendering can be more complicated than that simplified account.
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Try a sized gradient tile
The proposed workaround replaces the repeating gradient with a normal linear-gradient(), gives that background image an explicit size, and lets it repeat. The aim is to make the tile’s boundaries line up cleanly so the stripe pattern repeats evenly.
.stripes {
background-image: linear-gradient(45deg, black 0 10px, #444 10px 11px);
background-size: /* choose dimensions for a seamless tile */;
background-repeat: repeat;
}The comment is intentional: there is no single tile size that fits every angle and stripe pattern. Work out dimensions for the specific design rather than copying an arbitrary value. Coyier’s article links a generator and includes JavaScript that calculates gradient stops and background dimensions; it also shows how to use the helper with styled-components.
Choose between the two approaches
| Approach | What it offers | What to watch |
|---|---|---|
repeating-linear-gradient() |
A simpler declaration for repeating stripes. | Narrow angled stripes may look uneven in some examples; inspect the rendered result. |
linear-gradient() with background-size |
A sized tile that Coyier describes as more robust for the narrow angled examples. | Calculating dimensions is more involved, especially for angled stripes; verify that the tile repeats seamlessly in your target environment. |
For horizontal or vertical stripes, selecting tile dimensions is comparatively straightforward. For angled stripes, use geometry or a suitable generator, then check the result at the sizes and rendering conditions that matter for your design. If thicker stripes meet the visual requirement, they may make the reported irregularity less noticeable without the extra tile calculations.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What the workaround does—and does not—establish
In “No-Jank CSS Stripes,” published February 1, 2021, Coyier’s recommendation is to use a sized gradient tile for the narrow angled-stripe issue he describes: read the CSS-Tricks article and its examples. The article does not provide a systematic cross-browser test or a current compatibility table. Treat the technique as a practical option to test, not a guarantee for every browser, display, angle, or stripe width.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Best Value
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
