NodlumeStripes & rulings · Lines
Diagonal stripes CSS texture
Diagonal stripes run wide bands across the surface at forty-five degrees, with the band and the gap the same width, so the pattern is calm rather than vibrating. It is the texture of banners, badges, progress bars and skeleton fills — anything that should say in progress, unavailable, or pay attention — and it is one repeating linear gradient.
Equal band and gap keep the stripe steady; narrow the gap and it starts to shimmer, which is sometimes the point on a loading bar and never the point behind text. Keep the alpha under six percent on a surface and raise it to twenty or more on a badge. Animate the background position for a barber-pole, and honor prefers-reduced-motion.
Under text
Reading-size copy on the texture, so the alpha is judged by legibility rather than by taste.
A card on top
Separated without a second border.
Recipe
- Kind
- Lines
- Ink
- theme foreground at 5%
- Pitch
- 16px
- Line
- 8px
- Angle
- 45°
- Ink color
- color-mix(in oklab, var(--foreground) 5%, transparent)
CSS
.diagonal-stripes {
background-image: repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 8px, transparent 8px 16px);
}Tailwind
bg-[image:repeating-linear-gradient(45deg,_color-mix(in_oklab,_var(--foreground)_5%,_transparent)_0_8px,_transparent_8px_16px)]
Token
--texture-diagonal-stripes: repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 8px, transparent 8px 16px);
Diagonal stripes, answered
- How is the diagonal stripes texture made in CSS?
- Diagonal stripes is one repeating linear gradient, where the first stop is the band and the period is the pitch. Its ink is the theme's foreground color mixed to 5% with color-mix, so the same declaration re-tints itself when the theme switches between light and dark mode. The full declaration is repeating-linear-gradient(45deg, color-mix(in oklab, var(--foreground) 5%, transparent) 0 8px, transparent 8px 16px) — copy the CSS rule, the Tailwind classes or the custom property above, or open it in the playground to change the pitch, the ink or the alpha.
- How do I use the diagonal stripes texture in Tailwind CSS?
- Copy the Tailwind tab: it is one or two arbitrary-value classes, bg-[image:…] for the gradient and bg-[size:…] for the pitch where the kind needs one, with spaces written as underscores. Tailwind v3 and v4 both accept the form. For a value you reuse across the site, register the Token tab's custom property in your theme and reference it from a utility.
- How subtle should the diagonal stripes texture be?
- Most line textures work between three and eight percent of the foreground; this preset sits at 5%. Where two layers cross, the crossings stack to roughly double strength, so halve the per-layer alpha you would use for a single stripe.