CSS Pattern Generator
Stripes, dots, grids and chevrons as pure CSS. No image, no request.
background-color: #ffffff;
background-image: linear-gradient(rgb(100 116 139 / 0.28) 1px, transparent 1px), linear-gradient(90deg, rgb(100 116 139 / 0.28) 1px, transparent 1px);
background-size: 24px 24px;
/* Tailwind */
bg-[#ffffff] bg-[image:linear-gradient(rgb(100_116_139_/_0.28)_1px,transparent_1px),linear-gradient(90deg,rgb(100_116_139_/_0.28)_1px,transparent_1px)] bg-[size:24px_24px]Every one of these is a gradient tile, repeated
A background pattern in CSS is one small tile, drawn with a gradient, and a
background-size that repeats it. Stripes are a
repeating-linear-gradient, dots are a radial-gradient in a square
tile, and grids, checks and chevrons are two or four linear gradients layered at angles. That is
all this generator does, and it is why the output is a few declarations instead of an image
request.
How to use it
-
Start from a preset
Graph paper, blueprint, pinstripe, polka, halftone, checkerboard, chevron, crosshatch, diamonds and triangles. Each is a real starting point with sensible alpha, not a demo.
-
Pick the shape
Nine pattern types. Stripes and crosshatch take an angle; dots, polka, grid and crosshatch take a line or dot size. The tile size slider sets the repeat for all of them.
-
Set the colours
The pattern colour has its own alpha. Keep it low — 0.05 to 0.3 — if text has to sit on top, and change the background to see it on the surface it will actually live on.
-
Copy CSS or Tailwind
The CSS is three or four background declarations with no image in them. The Tailwind version uses arbitrary values with the spaces already turned into underscores.
Why a gradient beats a tiled PNG
There is no file to load, so nothing flashes in late. The pattern is vector, so it stays sharp on a 3× display without a second asset. And the colours are plain values, which means a dark theme is a custom-property swap rather than a second image. The cost is that gradients can only draw straight edges and circles — for paper grain, noise or anything hand-drawn, an image is still the right tool.
The half-pixel that stops the jaggies
Two colour stops at the same position make a hard edge, and most browsers draw that edge
without anti-aliasing. Leaving half a pixel between them — #333 3px, transparent
3.5px — lets the browser blend across that gap and the circle comes out smooth. Every
curved shape here does this for you; the straight-edged ones (stripes, grid, checks) do not
need it because their edges fall on pixel boundaries at any integer size.
"CSS grid pattern" means two different things
A lot of searches for a grid pattern want graph paper: thin lines every n pixels, which is the Grid option above and has nothing to do with the layout system. If you were after the other one — placing elements in rows and columns — that is the CSS grid generator this site is named for, and the layout patterns collection is the set of ready-made grids.
Legibility over the pattern
The mistake that ruins most pattern backgrounds is contrast. A pattern is texture, and texture should sit well below the text on top of it: for body copy over a pattern the pattern colour usually wants an alpha under 0.15, and for a hero with large type you can go to 0.3. The preview card in the middle of the stage exists so you can see whether the text still reads as you push the alpha up.
Related: gradients and shadows
The same gradient functions produce smooth colour transitions in the gradient generator, and a pattern usually sits under a card that needs an elevation from the box shadow generator. Both output Tailwind alongside the CSS, as this one does.
Frequently asked questions
How do I make a background pattern with CSS?
background-size repeat it. A stripe is a repeating-linear-gradient, a dot is a radial-gradient in a small square tile, and a grid is two thin linear gradients layered at right angles. Every pattern this generator produces is one of those three ideas, and the CSS it copies has no image in it at all.Is a CSS pattern better than a background image?
How do I make CSS stripes?
repeating-linear-gradient(45deg, #333 0 4px, transparent 4px 16px). The two positions after each colour give it a start and an end, so the first colour runs from 0 to 4px and the gap runs from 4px to 16px, then the whole thing repeats. Change the angle for horizontal, vertical or diagonal stripes.How do I make a polka dot background in CSS?
radial-gradient(circle, #333 3px, transparent 3.5px) on a tile with background-size: 24px 24px. The half-pixel gap between the two stops is what keeps the edge from aliasing. Offsetting a second copy by half a tile gives you the staggered layout that looks more like fabric than graph paper.How do I make a CSS grid pattern background?
linear-gradient(#ddd 1px, transparent 1px), linear-gradient(90deg, #ddd 1px, transparent 1px), with background-size: 32px 32px. The first draws the horizontal lines and the second the vertical ones. This is the same technique that graph-paper and blueprint backgrounds use, and it is unrelated to CSS Grid the layout system — the name collision confuses a lot of searches.Why do my CSS pattern edges look jagged?
#333 3px, transparent 3.5px rather than 3px, 3px — and the edge is smoothed. The generator does this for you on every shape that has a curve.Can I use these patterns in Tailwind?
bg-[image:…] for the gradient, bg-[size:24px_24px] for the tile and a plain colour utility for the base. The Tailwind tab here writes those out with spaces replaced by underscores, which is the syntax Tailwind requires inside square brackets.Does the pattern affect page performance?
background-size on a very large element with many layers, which multiplies the paint work; a tile of 12px or more is fine everywhere in practice.