New tool — CSS pattern generator
Build pure-CSS background patterns interactively — pick colors, scale and angle, then copy the code.
Our pattern snippets just grew up into a full CSS pattern generator. Instead of copying a fixed snippet and editing the variables by hand, pick a pattern, set two colors, and drag the size, thickness and angle sliders — the preview updates live and you copy a ready-to-paste declaration.
What it generates
Seven pure-CSS patterns, no images:
- Checkerboard — one
conic-gradient. - Dots — a tiled
radial-gradient. - Grid — two crossing
linear-gradients. - Diagonal and vertical stripes —
repeating-linear-gradient. - Zigzag — four interlocking gradients.
- Crosshatch — woven diagonal hatching.
These are the same recipes behind our checkerboard, graph-paper grid, zigzag and crosshatch snippets — now tunable in one place.
Because each pattern is just gradients driven by two colors, it scales infinitely and re-themes with a swap. Try it on a contrasting backdrop for hero sections and empty states.
Now at 32 tools and 24 snippets. Browse tools, snippets, or subscribe via RSS.