230+ CSS Background Patterns: Free Examples & Code Snippets (Page 3)
Examples
CSS Radial Pattern With Subtle Animation
A 100px tile of two offset radial gradients — each creating concentric rings in yellow, dark blue, and teal with precise %-stop bands (43-83%). The second copy is shifted by 50px for a staggered effect. A ::before overlay fades the dark blue background in and out on a 4s infinite loop, giving the pattern a subtle pulsing depth. CSS only, one div.
See the Pen CSS Radial Pattern With Subtle Animation.
CSS Irregular Stripes Background (Cicada Principle)
Three vertical linear-gradient stripes — red, blue, dark blue — each with a different width (7px, 23px, 23px) and tiled at three distinct background-size values (43px, 61px, 89px). Since 43, 61, and 89 are prime, their periods never align — producing an irregular, pseudo-random stripe pattern. The Cicada Principle in 8 lines of CSS.
See the Pen CSS Irregular Stripes Background (Cicada Principle).
CSS-Only Pattern: Flowers
A floral tile pattern built from 22 radial-gradient circles on a 220×220px grid. Four groups form a flower: group one (center petal ring), group two (dark corner petals), groups three and four (outer accent dots). A larger central circle in cream ties the composition. Clicking swaps the palette — 8 color schemes cycle via JS. Pure CSS pattern with a palette picker.
See the Pen CSS-Only Pattern: Flowers.
A dotted grid with diagonal crosshairs — three backgrounds on body. A conic gradient at 1px 1px tiles 1em dots. Two orthogonal linear gradients (±45°) with subpixel 0.5px strokes create thin diagonal lines crossing at each grid intersection. The result is a precise drafting-paper blueprint texture.
