CSS Background Pattern Generator

Last reviewed on 2026-10-03

Build gradient-only background patterns (grids, dots, stripes, checkerboards and square grids) and copy the CSS. Everything is drawn with CSS gradients, so there are no image files to host and the pattern stays sharp at any zoom level. The defaults are set up for black backgrounds, but any colours work.

How the patterns work

• Grid lines: two linear-gradient layers, each coloured only for the line width, repeated by background-size.
• Dot grid: one radial-gradient dot per tile. The colour stop and the transparent stop are half a pixel apart to soften the edge.
• Stripes and lines: repeating-linear-gradient, which repeats on its own, so the tile size becomes the stripe period.
• Checkerboard: repeating-conic-gradient alternating every quarter turn.
• Square grid: a conic-gradient centred inside the tile that only paints its top-left quarter.

Pattern layers sit on top of background-color, so the background colour shows through the transparent parts. The longer explanations, with more variations (graph paper, fading grids, coloured squares in one corner), are on the black grid background and CSS background patterns pages. For solid colours and gradients, use the CSS background generator.

Browser support

Linear, radial and repeating gradients work in every current browser. Conic gradients (used by the checkerboard and square grid) are supported in current Chrome, Edge, Firefox and Safari; very old browsers ignore the declaration and show only the background colour.