TTULAKITO
Designer

CSS Pattern Generator

Build repeating CSS background patterns with stripes and dots.

All tools

Preview

CSS

background: radial-gradient(circle, #1e293b 2px, transparent 2px) #f1f5f9;
background-size: 20px 20px;

Frequently asked questions

How do CSS patterns work without an image?
Repeating gradients (repeating-linear-gradient, repeating-radial-gradient) and tiled background images built from gradients can produce stripes, dots, checkerboards, and more, all from CSS. The browser tiles them automatically with background-repeat.
Will CSS patterns hurt performance?
Simple gradient patterns are fast because they're rasterized once and tiled. Stacking many gradients with semi-transparent layers can slow scrolling on mobile, so test on a low-end device if you go heavy.
How do I make a CSS pattern subtle enough not to distract?
Use low contrast (5-10% opacity difference between pattern and background) and keep the repeat size small. Patterns should hint at texture, not compete with content.