CSS Pattern Generator
Generate seamless CSS background patterns: dots, grid, stripes, checkerboard, diagonal and graph paper. No images needed. Copy the CSS.
.pattern {
background-color: #0f1117;
background-image: radial-gradient(#6d5efc 2.3333333333333335px, transparent 2.3333333333333335px);
background-size: 28px 28px;
}About the css pattern generator
Every pattern here is made from gradients and background-size, with no image files involved. A dot grid is a radial gradient repeated on a fixed tile; graph paper is two sets of line gradients at different scales layered over each other.
Because the pattern is generated, it stays crisp at any zoom or pixel density, the colours can be changed instantly, and it adds nothing to your page weight.
How to use it
- 1Choose the pattern type.
- 2Set the scale, which controls the size of one tile.
- 3Pick the pattern colour and the background behind it.
- 4Keep contrast low for a background texture. Patterns compete with content when too strong.
- 5Copy the CSS.
Worth knowing
- Patterns tile automatically. background-size defines one tile, and the browser repeats it.
- For a subtle texture, keep the pattern colour close to the background colour.
- Dot grids at around twenty to thirty pixels are the standard look for design tool canvases.
Questions
Are CSS patterns better than a repeating PNG?
For geometric patterns, yes. They stay sharp on retina screens, cost no network request, and the colour can be changed with a variable. Photographic or organic textures still need an image.
How do I change the pattern size?
The scale slider maps to background-size. Increasing it makes each tile larger, so the pattern appears more spaced out.
Can I put content on top of a pattern?
Yes, and you usually should keep the contrast low so it does not fight with the text. A pattern that is clearly visible on its own is often too strong once content sits on it.