CSS Pattern Generator
How CSS patterns are built
Every repeating background on this page is made from gradients and background-size — no image files, no HTTP requests, and no blurring when the element scales. The trick in all of them is the hard stop: two colour stops at the same position, which turns a blend into a crisp edge.
Syntax
background-image: <gradient>; background-size: <tile width> <tile height>;| Part | What it controls |
|---|---|
| hard stops | Two stops sharing a position create a sharp edge. linear-gradient(90deg, #000 0 50%, transparent 50%) is a stripe, not a fade. |
| background-size | Sets the tile. The gradient draws once inside that box and the browser repeats it across the element. |
| radial-gradient for dots | A circle with a hard stop, tiled, gives a dot grid. Change background-size to change the spacing without touching the dot. |
| background-position | Offsetting a second layer by half a tile is what staggers checkerboards and brick patterns. |
| multiple layers | background-image takes a comma-separated list. Crossed stripe layers make a grid; the first layer paints on top. |
| repeating-linear-gradient | Repeats a stop list end to end on its own, so stripes need no background-size at all. |
Notes from practice
Patterns scale without blurring
Because the browser draws them, a CSS pattern is sharp at any zoom or pixel density. A tiled PNG has to ship at 2x or 3x to match.
Keep contrast low
A background pattern competes with content. Dots and grids at a few percent alpha against the surface read as texture; at full contrast they read as noise.
Tile size is the whole design
The same gradient at 12px and at 48px are completely different patterns. Adjust background-size before adjusting colours.
CSS Pattern Generator FAQ
How do I create a dot grid background in CSS?
Tile a radial gradient with a hard stop: background-image: radial-gradient(#cfd5e5 1px, transparent 1.6px) with background-size: 20px 20px. The first value is the dot, the second ends it cleanly, and the background-size controls the spacing.
How do I make stripes in CSS?
Use repeating-linear-gradient with two stops at the same position: repeating-linear-gradient(45deg, #eee 0 10px, #fff 10px 20px). Matching positions produce a hard edge rather than a blend, which is what makes a stripe a stripe.
Are CSS patterns better than background images?
For geometric patterns, yes. They add no network requests, stay perfectly sharp at any pixel density and zoom level, and can be recoloured with a custom property. Photographic or illustrative textures still need a real image.
How do I make a checkerboard pattern in CSS?
Stack two identical conic or linear gradients and offset the second by half a tile with background-position. Both layers share one background-size, so the offset is what interlocks them into a checkerboard.
Do CSS patterns hurt performance?
Rarely. They are painted once and cached like any background. The exception is very small tiles across a very large area, or a pattern on an element that animates, where repainting every frame can be noticeable.
Related generators
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
- Blend Modes — Blend stacked backgrounds with background-blend-mode, or blend an element into what is behind it with mix-blend-mode.
- CSS Mask — Fade, spotlight or pattern an element away with gradient masks. Opaque pixels show, transparent pixels hide.
- Modern Color Functions — oklch(), color-mix(), relative colour syntax and light-dark(), with an sRGB hex fallback where it applies.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.