CSS Pattern Generator

A CSS pattern generator that previews on your real page

Most pattern generators show you a pattern on an empty square. Then you paste the CSS into your site and find it is too strong behind your text, or the colour fights with your brand. CSS Pattern Generator works the other way round: it draws the pattern as the background of the page you are on, live, while you adjust it. You see it behind your real content before you copy a single line.

Fourteen patterns

Stripes, dots, staggered dots, grid, graph paper, checker, diamonds, rings, plus signs, zigzag, waves, hexagons, triangles and bricks. Each one has its own controls, such as dot size, line or ring thickness, mortar width and angle, along with the pattern colour, the background colour, the tile size and the opacity.

Start from a preset

Fourteen ready-made looks give you a head start, from Paper dots, Soft grid and Blueprint to Honeycomb, Ocean waves and Terracotta bricks. Not sure what you want? Press Surprise me for a random combination, then refine it. Save up to 12 of your own patterns to reuse on other projects.

Subtle by default

A background pattern should add texture, not compete with your content. The generator starts at 10% opacity on white, which suits most sites, and you can drop the background colour completely for a pattern that sits on top of whatever is already there.

Copy clean CSS

When it looks right, Copy CSS gives you the background rules, built from gradients and small inline SVG tiles, with no image files to host. Paste it into your stylesheet, a page builder’s custom CSS field or a single section.

The panel opens on the page and can be dragged, folded or widened. Close it and the page goes back to normal. Nothing is sent anywhere.