Collections
Library and preview
Download an image
Everything is rendered on this device. No image is uploaded.
Build a background pattern out of pure CSS — no image files, no requests, and it scales to any size without going soft. Pick a family, pick a pattern, then tune it until it is yours.
On rotation: CSS has no way to rotate a background image. Where a pattern is drawn with angled gradients the angle is free and the output stays a single rule. Where it is a tiled shape, rotating it makes the output a rule plus a ::before. The Output group always shows which one you are getting.
Everything is rendered on this device. No image is uploaded.
A background pattern written in CSS costs no HTTP request, adds nothing to the page weight, and stays sharp at every pixel density because there is no bitmap to sample. The patterns here are built from repeating gradients and conic gradients, which every current browser handles natively.
The library is organised by technique rather than by look. Twenty-four families cover dots, grids, straight and diagonal lines, stripes, checks, triangles, zigzags, diamonds and waves. Each family holds around seventeen starting points, and each starting point is fully adjustable — the swatch is a place to begin, not a fixed choice.
Patterns work best as a quiet layer. Keep the contrast between pattern and background low for a background you can read text on, and save high-contrast settings for a small band or a hero panel where nothing has to sit on top of it.