About the CSS Pattern Generator
What is a CSS pattern generator?
A repeating background used to mean a small image tiled across an element, which meant an extra request, a file to keep somewhere, and a recolor whenever the design changed. Gradients replaced all of that. A gradient is just a rule about where colors sit, so a tightly stopped one draws a hard edge, and a background sized smaller than the element repeats it. Put those two facts together and you can draw dots, grids, stripes and checks with nothing but CSS.
Writing them by hand is the fiddly bit, because the numbers in a gradient and the numbers in background-size have to agree exactly or the tile shows a seam. This tool keeps them in step and shows the result immediately.
There's a switch here worth knowing about. Turning on the tile outline draws a dashed box around one tile, so you can see whether the pattern actually joins up at the edges. That's the whole game with a repeating background, and it's the one thing you can't tell from a small swatch.
The gallery runs all twenty-six patterns at once in whatever two colors you've picked. Nothing in it is a stock thumbnail, so what you see in a tile is what the CSS underneath will paint.
How to Use This Tool
- Pick one from the gallery. All twenty-six are drawn in your colors, so click the one that looks right. The filter chips narrow it to dots, lines, geometric or texture. Dots and grid are the quiet ones that work under content. Stripes, checks and diamonds are loud and want to be used sparingly.
- Set the tile size. This is the distance before the pattern repeats. Small tiles read as texture, large ones read as a motif.
- Adjust how much it fills. One slider controls dot size and line thickness, which is what decides whether a pattern whispers or shouts.
- Choose two colors. Keeping them close together is the difference between a subtle background and something that fights the text on top of it.
- Check the tile. Turn on the outline and look at the dashed edges. If nothing jumps, the pattern is seamless.
Common Use Cases
A pattern is background, and the good uses all keep it in the background.
- Hero sections: a faint dot or grid pattern behind a headline gives depth without any imagery to art direct.
- Empty states: a light pattern where content will eventually go makes an empty panel look intentional rather than broken.
- Transparency checkerboards: the checks pattern in two grays is exactly what image editors use behind a transparent PNG.
- Graph paper backgrounds: canvases, diagram editors and anything with a snap-to grid, where the pattern is functional rather than decorative.
- Barber stripes: diagonal stripes at low contrast mark a disabled or in-progress area, which people read instantly.
- Print and email: gradients survive where a background image often gets stripped, so a pattern that is pure CSS holds up better.
Working on the same surface? The CSS Gradient Border Generator handles the edge, the CSS Separator Generator shapes the join between two sections, and the SVG to CSS Background Converter is the answer when a pattern is too detailed for gradients. Or browse all our free developer tools.
Frequently Asked Questions
How does a gradient turn into a pattern?
Two ideas stacked on top of each other. First, if two color stops sit at the same position the gradient has no blend at all, just a hard edge, so you can draw a shape with it. Second, background-size smaller than the element makes the image tile. So a radial gradient drawing one dot, sized to 24 by 24 pixels, becomes a field of dots. The repeating- gradients do the tiling themselves, which is why some of these patterns have no background-size in the output.
Are CSS patterns bad for performance?
They're usually better than the image they replace, since there's no request and nothing to decode. The cost is paint time, and it's real on a very large area with several stacked gradients, particularly on a phone. Keep the tile from getting too small, avoid animating an element that carries one, and if a pattern covers the whole page consider putting it on a fixed pseudo-element so it isn't repainted on every scroll.
Why does my pattern have a visible seam?
The gradient and the tile size disagree. If a dot has a 6 pixel radius in a 20 pixel tile it fits, but nudge the radius past half the tile and the neighboring copies overlap and the grid stops looking even. Turn on the tile outline here and it becomes obvious. The other cause is a fractional tile size on a scaled element, where the browser rounds each tile slightly differently.
Can I make the pattern fade out?
Yes, with a mask rather than opacity. Opacity on the element fades the content on top too. Add mask-image: linear-gradient(black, transparent) and the pattern fades while everything above it stays solid. If you only need a lighter pattern, changing the pattern color is cheaper than either.
Will these work in dark mode?
Only if you swap the colors, and the easiest way is to write the two colors as custom properties and redefine them in your dark theme block. A pattern that reads as a light texture on white usually turns into harsh noise on a dark background at the same contrast, so darker themes generally want the pattern color closer to the background than you would expect.
How do I put content on top?
Just nest it. The pattern is a background on an element, so anything inside sits above it with no positioning needed. What does bite people is contrast, since text over a busy pattern is hard to read. Either keep the pattern very low contrast, or put a semi-transparent panel behind the text.
Can I animate a pattern?
Yes, and background-position is the cheap way to do it. Moving the position by exactly one tile over a few seconds gives you an endless scroll that loops without a jump, which is how barber pole progress bars work. Animating the gradient itself is far more expensive, since the browser has to redraw the whole image on every frame.
