Design / CSS

CSS Pattern Generator (Stripes, Dots, Grid, Checkerboard)

Build repeating background patterns from CSS gradients alone: stripes, diagonal stripes, grid lines, polka dots, checkerboard, and zigzag, with your own two colours, size, and line width, and copy the CSS.

CSS Pattern Generator (Stripes, Dots, Grid, Checkerboard): Each pattern is one or two CSS gradients repeating at the size you choose: repeating-linear-gradient for stripes, two crossing linear gradients for a grid, radial-gradient for dots, and repeating-conic-gradient for a checkerboard. There is no image file, so the pattern stays sharp at any zoom and costs nothing to load. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
CSS pattern generatorLocal processing

Runs entirely in your browser

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Each pattern is drawn with CSS gradients only, so there is no image to download, it stays sharp at any zoom, and the colours can be changed in the stylesheet. Keep patterns behind text subtle: low contrast between the two colours keeps the text readable.

How a checkerboard is drawn

repeating-conic-gradient(#000 0 25%, transparent 0 50%) paints the first and third quarters of a turn around the centre of each tile, which gives two diagonal squares per tile; background-size sets the tile to twice the square size.

Combining patterns

Background images stack: list a gradient from the CSS gradient generator after a pattern, separated by a comma, and the pattern sits on top of the gradient.

How to use it

  1. Choose a pattern.
  2. Pick the two colours, the repeat size, and the line width or dot size.
  3. Copy the CSS.

Privacy & limitations

Everything runs in your browser.

Related tools

CSS GradientSVG waveGlassmorphism

Frequently asked questions

Do the patterns work in every browser?

Yes: every current browser supports these gradients, including the conic gradient used for the checkerboard.

How do I put a pattern behind text?

Choose two close colours, so the pattern stays subtle and the text keeps enough contrast.

Can I change the angle of the stripes?

Yes: edit the angle in repeating-linear-gradient in the copied CSS, such as 60deg instead of 45deg.

Free tool · runs in your browser · no account required