CSS Pattern Background Generator

Most "pattern generator" tools quietly reuse the same repeating-linear-gradient formula for every option and just change the numbers. This one does not: each of the six pattern types here is built from the specific CSS technique that actually produces that shape. Stripes use a single repeating-linear-gradient with two color bands. Dots use one radial-gradient tiled purely through background-size — the classic CSS-dots trick — rather than a repeating-radial-gradient, which cannot tile a circular dot cleanly on a rectangular grid. Checkerboard uses the real four-quadrant conic-gradient formula: a conic gradient centered in a square tile naturally splits into four quadrant squares at 90-degree boundaries, and alternating two colors across those quadrants tiles into a genuine checkerboard, not an approximation.

Grid and diagonal crosshatch both layer two repeating-linear-gradients as separate background-image entries rather than faking the second direction with border tricks. Grid combines a "to right" and a "to bottom" repeating gradient for crisp horizontal and vertical rule lines. Crosshatch layers a +45deg and a -45deg repeating gradient for a basketweave-style diagonal weave — worth being precise about: this is an honest crosshatch, not true herringbone geometry, and the tool labels it that way rather than overclaiming. Triangles reuse the checkerboard's four-wedge conic-gradient technique but start the gradient rotated 45 degrees, which shifts the wedge boundaries from the tile's edge midpoints to its corners and turns the same four wedges into four corner-to-corner triangles instead of four quadrant squares.

Every pattern type exposes only the controls that actually apply to it — an angle slider shows up for stripes, dot radius and spacing show up for dots, line thickness shows up for grid and crosshatch — and the large tiled preview box repaints on every change so you can see several full repeats before committing to a value. Flip the output mode to SVG and the same pattern reappears as a <pattern> element built from plain rect, circle, path or polygon primitives, ready to paste inside any SVG document's <defs>, with a one-click download for a standalone .svg file.

Everything runs locally in your browser: no image uploads, no server round-trip, no account. For solid or gradient fills without repetition, the CSS gradient generator on this site is the right tool instead; this one is specifically for tileable geometric backgrounds built from zero image assets.