The Sub-Pixel Problem With Repeating Stripes

Creating stripes in CSS often leads developers to repeating-linear-gradient paired with hard-stop gradients. The approach is straightforward: define one color between two stops, then another color between shared stops, and repeat. The result is angled stripes with uniform spacing, like this dark gray and black pattern:

background: repeating-linear-gradient(
  45deg,
  black,
  black 10px,
  #444 10px,
  #444 11px
);

But the rendered output frequently reveals visual artifacts: some stripes appear lighter or thinner than their neighbors. This jankiness is not limited to specific colors or angles—it appears across a wide range of repeating-linear-gradient configurations. The effect is most noticeable with thinner stripes (under 5px) and becomes less apparent as stripes grow thicker. Sub-pixel rendering is the likely culprit, though the precise cause remains unclear.

The problem intensifies with tighter stripe patterns at certain angles. Even simple variations, such as reversing the stripe direction, can make the rendering inconsistencies more pronounced:

A Reliable Alternative

A previously documented workaround exists: avoid repeating-linear-gradient entirely. Instead, use a standard linear-gradient, set a specific background-size, and let the background tile naturally. This approach eliminates the rendering inconsistencies. The challenge lies in determining the correct dimensions for the background-size when stripes run at an angle. For vertical or horizontal stripes, the calculation is manageable, but angled stripes require more complex mathematics—likely involving the Pythagorean theorem—to ensure seamless tiling.

Rather than manually deriving these values, a purpose-built generator tool handles the geometry automatically. The tool's unminified JavaScript contains a section marked / GET BACKGROUND SIZE / that performs the necessary calculations to produce clean, consistent stripes.

While repeating-linear-gradient offers easier syntax for reasoning about stripes, its visual output falls short. The generator approach, though slightly less intuitive, delivers the precise rendering that production designs demand.