Dot Size3px
Spacing20px
Live Preview
CSS Code
Dots • Lines • Grid • Stripes • Pure CSS, No Images
This tool builds tileable background patterns using nothing but CSS gradients — no image files at all, which keeps the page extremely lightweight. Dots use a radial-gradient with a hard color stop matched to a transparent stop at the same radius, tiled through background-size. Stripes use repeating-linear-gradient at an angle you control, with two equal-width color bands per cycle. Grid combines two separate repeating-linear-gradient layers — one for vertical lines, one for horizontal — layered together as comma-separated background images, with matching background-size values on both layers so the grid cells stay perfectly square. Adjust colors, sizing, and spacing, then copy the generated CSS directly into any element's background. All processing happens locally in your browser.