CSS Pattern Generator
Generate pure-CSS background patterns — dots, grid, stripes, checkerboard, zigzag — with spacing, rotation and opacity controls. Free, in your browser.
Cell size sets the spacing, unit size the ink drawn inside it — a small dot on a wide cell is a sparse pattern. Checkerboard and zigzag fill their cell, so they have no unit size of their own.
Live preview
background-color: #eef2ff; background-image: radial-gradient(circle, #4f46e5 5px, transparent 6px); background-size: 24px 24px;
Export as a file
🔒 Runs in your browser — nothing is uploaded.
Cell size is spacing, unit size is ink
Pick a pattern — dots, grid, stripes, checkerboard or zigzag — choose a pattern color and background, then set the cell the pattern repeats on, the size of the unit drawn inside that cell, the rotation and the pattern opacity, and copy a self-contained block of CSS. Cell size is the spacing and unit size is the ink, so a small dot on a wide cell gives a sparse pattern instead of a bigger one; checkerboard and zigzag fill their cell and take no unit size of their own. The live preview updates as you change every control, so you can dial in the exact background before you copy anything.
Pure CSS, no images
Each pattern is drawn with repeating linear and radial gradients on a single element. There are no images, no SVG and no JavaScript, so the background scales crisply at any size, loads instantly and works offline. Paste the declarations into any selector and you are done. Rotation is the one thing a background cannot do by itself, so turning a pattern switches the output to two short rules that put the tiling on a rotated ::before layer — paste both and give the element the pattern class.
Frequently asked questions
How do I use the generated CSS?
Copy the block and paste it into any CSS rule, such as a section or div. The declarations set background-color, background-image and background-size, so the pattern renders wherever you apply that selector. With rotation on, the output is two short rules for a .pattern class instead — paste both and give the element that class.
Are these patterns really pure CSS?
Yes. Every pattern is built from repeating linear and radial gradients on one element — no images, no SVG and no JavaScript, which keeps them tiny, infinitely tileable and resolution independent.
Does the rotation control affect every pattern?
Yes. Stripes carry the angle inside their own gradient, so their CSS stays a single rotated repeating-gradient. Dots, grid, checkerboard and zigzag cannot be turned that way, because a background image has no rotation of its own, so the tool moves the tiling onto a rotated ::before layer and hands you the two rules that do it, with the element content left upright.
How do I space the pattern out without making the shapes bigger?
Raise the cell size and lower the unit size. The cell is the spacing the pattern repeats on and the unit size is the ink drawn inside it, so a 6px dot stays a 6px dot on a 60px cell. Checkerboard and zigzag fill their cell, so they have no separate unit size. Pattern opacity fades the ink over the background colour.