What is CSS Pattern?
This tool creates seamless background patterns using only CSS gradients — no image files needed. Pick a pattern, set the size and two colors, preview it live and copy the CSS. Pure-CSS patterns are tiny, crisp at any resolution and easy to recolor.
How CSS Pattern works
Patterns are built from linear-gradient, radial-gradient and repeating-*-gradient with a tiled background-size.
Example: a dot grid uses background-image: radial-gradient(#3b82f6 2px, transparent 2px) with background-size: 24px 24px.
Common uses
- Add subtle texture to sections and heroes
- Create dot, grid or stripe backgrounds
- Avoid extra image HTTP requests
- Recolor patterns instantly
Frequently asked questions
Are CSS patterns better than images?
Often yes — they are tiny, scale perfectly and are easy to recolor, with no extra downloads.
How do I make the pattern bigger?
Increase the size value, which sets the background-size tile dimensions.
Can I use these as a repeating background?
Yes, gradient patterns tile automatically across the whole element.