CSS pattern generator
Pick dots, a grid, stripes or checks and the tool writes the repeating CSS for you, with no image file. It opens on a light blue graph-paper grid with 32-pixel squares.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- Stripes
- repeating-linear-gradient(), which repeats its colour stops to cover the whole box
- Source: developer.mozilla.org, checked 2026-11
- Checks
- conic-gradient() quarters on a repeated tile, the checkerboard method MDN shows
- Source: developer.mozilla.org, checked 2026-11
- Grid and dots
- Ordinary gradients on one tile, repeated with background size; a gradient has no size of its own
- Source: developer.mozilla.org, checked 2026-11
- Tile size
- 4 to 200 pixels; line width or dot radius up to half the tile
Want a page that already looks finished?
A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.
CSS pattern generator: what to know
This page starts the background generator for this case. For every option and how to use it, see the background generator.
Choosing tile size and line width
Sizes are in pixels, not percentages, so the pattern looks the same on a small card and a full page. For graph paper behind content, use a tile of 24 to 40 pixels and lines of 1 pixel in a colour only a little darker than the background.
For bold stripes or a checkerboard as a feature, go bigger and raise the contrast. Stripes also take an angle: 45° gives classic diagonal candy stripes, 90° gives vertical ones.
Using the pattern CSS
The output is a single background declaration. Paste it on a section or the page body. Text placed straight on a busy pattern is hard to read, so give text a solid panel or keep the pattern faint.
Questions
Is the pattern an image file?
No. It's written in CSS with gradients, so there's nothing to upload or host. Download the PNG only if you need the pattern somewhere CSS doesn't reach, such as a slide.
Can I make diagonal stripes?
Yes. Pick Stripes and set the angle, for example 45°. The tile size sets the gap between stripes and the line width sets how thick each stripe is.