CSS Background Pattern Generator

Make a background pattern with nothing but CSS

CSS Background Pattern Generator builds stripes, dots, grids, a checkerboard, a zigzag and a cross-hatch out of CSS gradients. There is no image file to download or host: the pattern is a few lines of CSS that you paste into your stylesheet, and it stays sharp at any zoom level or screen density.

The preview box uses exactly the declarations shown in the CSS box, so a plain element with that rule looks the same as the preview. Everything runs in your browser; nothing you enter is sent anywhere.

How to create a CSS pattern

1. Pick a pattern from the Pattern list, or click one of the presets to start from a finished design.
2. Set the background colour and the pattern colour, either with the colour picker or by typing a hex code such as #6D28D9. Swap colours exchanges the two.
3. Adjust the size. Its label tells you what it measures for the current pattern, for example Stripe spacing, Dot spacing, Cell size or Square size.
4. Change the extra setting if the pattern has one: line thickness for stripes, grids and cross-hatch, dot size for the two dot patterns, and stripe angle for diagonal stripes.
5. Check the preview, then click Copy CSS and paste the rule into your stylesheet. Add the class pattern to the element, or rename the selector to one you already use.

What the generated CSS contains

• background-color: your background colour, which shows through the transparent parts of the gradients.
• background-image: one gradient per layer — linear, repeating-linear, radial or conic, depending on the pattern. Patterns with several layers list each on its own line.
• background-size and background-position: added only when the pattern needs them, to set the tile size and to offset layers (the second row of offset dots, the halves of the zigzag).
• Colour format: colours are written as lowercase six-digit hex codes; sizes in px with at most two decimals.

Where CSS patterns are handy

• Section and hero backgrounds: a light stripe or dot pattern adds texture without an extra image request.
• Placeholders and empty states: a checkerboard or cross-hatch marks an area that has no content yet.
• Notebook and blueprint looks: horizontal lines or a fine grid behind text, cards or diagrams.

Tips for patterns that work behind content

• Keep text readable: busy, high-contrast patterns make text hard to read. Use two close colours, or put text on a solid panel above the pattern. The Color Contrast Checker tests text against your darkest and lightest pattern colour.
• Whole pixels look crisper: lines can look slightly soft at fractional sizes, and diagonal edges are always smoothed a little.
• Build a matching palette: the Color Palette Generator gives you lighter and darker shades of one colour, which suit subtle patterns.

How gradients become patterns

Hard colour stops

A gradient normally blends from one colour to another. When two colour stops sit at the same position, there is no blend, just a sharp edge. Stripes are a gradient that is solid colour up to the line thickness and transparent after it, and background-size makes that tile repeat across the element.

Layers and offsets

background-image accepts several gradients separated by commas, painted on top of each other. A grid is a horizontal and a vertical line layered together; offset dots are two dot layers, the second moved by half a tile.

CSS Background Pattern Generator: common questions