CSS Pattern Generator
Make repeating background patterns from pure CSS gradients — stripes at any angle, checkerboards, polka dots, grids, graph paper, cross-hatching, zigzags and diamonds — and copy the CSS.
How to Use
- Choose a pattern: stripes, checkerboard, dots, staggered dots, grid, graph paper, cross-hatch, zigzag or diamonds.
- Set the two colours (any CSS colour) and the tile size. Stripes also take an angle; stripes, dots and lines take a thickness.
- The preview updates as you go, with one repeating tile outlined in the corner.
- Copy the CSS and paste it into any element’s style. It needs no image files.
Worked Example
A 40 px checkerboard in grey (#CCCCCC) and white.
A conic gradient sweeps around the centre of each tile. With stops at 0–25% grey, 25–50% white, and the pattern repeating, the four quarters of the tile alternate grey, white, grey, white:
background-image: repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%);
background-size: 40px 40px;
Each 40 px tile therefore holds four 20 px squares, two of each colour, and the tiles line up into a checkerboard with 20 px squares. That is 3 lines of CSS and about 120 bytes, where a PNG of the same tile would be a separate download.
Show Work
Formulas
Patterns Without Pictures
Before CSS gradients, every stripe and check on the web was a small image tiled with background-repeat. Gradients arrived in Safari in 2008 and were standardised in CSS Images Level 3; designers soon noticed that hard colour stops turn a gradient into a shape. Lea Verou’s CSS3 Patterns Gallery (2011) showed that checkerboards, zigzags, plaid and even complex textures could be built from layered gradients alone.
Conic gradients, added in CSS Images Level 4 and supported everywhere by 2020, made the checkerboard a single gradient instead of four, which also removed the thin seams the older layered version could show.
About This Tool
This tool builds nine repeating patterns from CSS gradients with any two CSS colours, a tile size, and a thickness or angle where the pattern uses one. The preview outlines one repeating tile, and the readout gives the number of gradient layers, the contrast between the two colours, and the size of the CSS.
The copied CSS sets background-color, background-image, background-size and background-position separately, so it can be pasted into an existing rule without overwriting other background settings. Everything runs in your browser.
Related tools: CSS Gradient Generator, Box Shadow Generator, and Contrast Checker.
Frequently Asked Questions
How can CSS draw a pattern with no image?
Gradients can have hard edges: when two colour stops sit at the same position, the colour jumps instead of fading. A gradient that is blue from 0 to 20 px and white from 20 to 40 px, repeated, is a stripe. background-size then makes a small tile that repeats across the element, and several gradients can be layered for grids and checks.
Is a CSS pattern better than an image?
Usually. It is a few hundred bytes instead of a file download, stays sharp at any zoom or screen density, and you can change its colours with a variable. Very complex patterns can be slower to paint than a small image on old phones, so keep them to a few layers.
Why does the contrast readout matter?
A busy, high-contrast pattern behind text makes it hard to read. If you put text over a pattern, keep the two colours close (a ratio under about 1.5:1 for a subtle texture) or give the text its own solid background.
Why do thin lines sometimes look blurry or uneven?
When a tile size or line width does not land on whole device pixels — for example on screens scaled to 125% or 150% — the browser has to blend edges. Whole-pixel sizes such as 20, 40 or 50 px and 1–2 px lines stay crisp on most screens.
Will this work in every browser?
Linear and radial gradients work in every browser in use. The checkerboard uses a conic gradient, supported by all current browsers since 2020; on very old browsers it falls back to the plain background colour.
How do I use the CSS Pattern Generator?
Simply pick your options and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Section backgrounds
A subtle 8 px dot grid or graph-paper texture behind a hero section, at a contrast of about 1.1:1 so text stays readable.
Placeholders and empty states
Fill image slots or loading areas with diagonal stripes so they are clearly unfinished.
Transparency backgrounds
The grey-and-white checkerboard behind transparent images in editors is a 16 px conic-gradient checker.
Retro and print styles
Barber-pole stripes, gingham-style cross-hatching or zigzag borders without a single image file.
Last updated: