A background pattern is the cheapest thing in this entire catalogue: a grid, a dot field or a noise texture that stops a large empty area reading as unfinished. It costs one paint, it needs no runtime, and it is the alternative to a shader or a video for most of what those get used for.
The patterns
Grid Pattern by dillionverma is the SVG grid, fully customisable with utility classes, and Animated Grid Pattern by the same author adds cells that light up. Grid Pattern by Ali Imam is another take, and Card with Grid Pattern by Ali-Hussein-dev applies it inside a card.
Gradient Dots by Efferd is the coloured dot field, Dotted Surface by the same author is the depth version, and Floating paths by bundui is the line-based one.
The pure-CSS versions
Worth knowing, because for the static cases no component is needed at all.
A dot grid is one radial-gradient repeated. A line grid is two linear-gradients. A checkerboard is two gradients with an offset. Each is a single declaration, costs one paint, and scales to any size without a request.
Two refinements make them look designed rather than default. Mask the pattern with a radial gradient so it fades out toward the edges, which stops it fighting the content in the middle. And keep the contrast very low - a pattern you notice is a pattern competing with the text on top of it.
Grain and noise
The other half of this family, and the one with a specific job: noise breaks up banding in large flat gradients, which the gradient guide names as the fix that actually works. More stops do not add precision; a faint noise overlay does.
Two ways to get it. A tiny tiled PNG at very low opacity, which is a few kilobytes and works everywhere. Or an SVG feTurbulence filter, which needs no image but is expensive to rasterise at full-screen sizes, so generate it once into a background rather than animating it.
When a pattern beats an effect
The comparison that matters, since patterns compete with the animated backgrounds people usually reach for.
A pattern is one paint and no frame loop, while a shader is a program run per pixel per frame, per the shader guide. For a section divider, a card surface or the area behind a form, the pattern is not a downgrade - it is the correct amount of visual interest for a place nobody should be looking.
Keep the expensive effects for the one screen that is meant to be looked at, and let everything else be a gradient with a grid on it.
The two rules
It is decoration. Mark it aria-hidden, keep it out of the tab order, and never let it carry information.
Contrast is measured on top of it. A pattern reduces the effective contrast of text over it, and a body-text ratio that passes on a flat background can fail over a grid. Check it on the busiest part of the pattern, not the average.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| A repeating CSS gradient | Dots, lines and checks in one declaration | No animation |
| An SVG pattern | Sharper control over the shape, still one paint | A little more markup |
| A tiled noise image | Killing banding across a large gradient | A few kilobytes |
| 21st | Grids, dot fields, animated cells and depth surfaces | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Browse background components →
Frequently asked
- How do you make a dot or grid background in pure CSS?
- A dot grid is one repeated radial-gradient; a line grid is two linear-gradients; a checkerboard is two gradients with an offset. Each is a single declaration, costs one paint and scales to any size. Mask it with a radial gradient so it fades toward the edges, and keep the contrast very low.
- How do you fix banding in a large gradient?
- A faint noise or grain overlay, not more colour stops. Banding comes from quantisation across a large area and extra stops add no precision. A tiny tiled image at low opacity works everywhere; an SVG turbulence filter avoids the image but is expensive to rasterise at full-screen size.
- When is a pattern better than an animated background?
- Almost everywhere that is not the one screen meant to be looked at. A pattern is one paint with no frame loop, while a shader is a program run per pixel per frame. For a section divider, a card surface or the area behind a form, the pattern is the correct amount of interest.
- Do background patterns affect accessibility?
- Yes, through contrast. A pattern lowers the effective contrast of text over it, so a ratio that passes on a flat background can fail over a grid; measure on the busiest part rather than the average. Mark the pattern aria-hidden and keep it out of the tab order.