CSS Background Pattern Generator

CSS can draw repeating background patterns with gradients alone: hard color stops turn a gradient into stripes, and background-size repeats one tile across the element. The result is sharp at any zoom, costs no download and can be recolored by changing one value. This generator writes ten seamless patterns — stripes at any angle, polka dots, dot grid, checkerboard, grid lines, graph paper, crosshatch, zigzag, diamonds and half-square triangles — previews the CSS in your browser and also gives an SVG version.

How to use this tool

1. Choose a pattern.
2. Set the pattern and background colors.
3. Set the tile size and the stripe width, line thickness or dot size (and the angle for stripes).
4. Copy the CSS, or download the SVG pattern for design tools.

Formula

stripes: repeating-linear-gradient(angle, color 0 w, transparent w s) · dots: radial-gradient(circle, color r, transparent r + 1px) with background-size s s · grid: linear-gradient(color t, transparent t) across and down

s is the tile size, w the stripe width, r half the dot size and t the line thickness. Two color stops at the same position make a hard edge instead of a fade. The zigzag and diamond patterns use four 45° gradients that each paint a triangle in one corner of the tile.

Example

The defaults — stripes at 45°, #2563eb on #eff6ff, 8 px wide every 24 px — give background-image: repeating-linear-gradient(45deg, #2563eb 0 8px, transparent 8px 24px);. A 40 px checkerboard is one conic gradient: conic-gradient(#2563eb 90deg, transparent 90deg 180deg, #2563eb 180deg 270deg, transparent 270deg) with background-size: 40px 40px, which makes 20 px squares.