CSS pattern generator
Generate pure-CSS background patterns — checkerboard, dots, grid, stripes, zigzag, crosshatch. Tune colors, scale and angle, then copy the code. No images.
background-color: #12151c; background-image: conic-gradient(#6b46ff 25%, #12151c 0 50%, #6b46ff 0 75%, #12151c 0); background-size: 40px 40px;
About this CSS pattern generator
Build pure-CSS background patterns — checkerboard, dots, grid, diagonal and vertical stripes, zigzag and crosshatch — without a single image. Pick two colors, drag the size, thickness and angle sliders, and watch the preview update live. When it looks right, copy the ready-to-paste declaration.
How it works
Each pattern is a small gradient recipe. A conic-gradient makes the
checkerboard, a radial-gradient tiles dots, crossing linear-gradients draw
the grid, and repeating-linear-gradient builds the stripes and crosshatch. The
background-size (and a half-tile background-position for the zigzag) controls
the scale, so the whole pattern is just a few lines of CSS that repeats forever.
When to use it
Use patterns for section backgrounds, hero blocks, cards, empty states and placeholders where a flat color feels bare but an image would be heavy. Because everything is driven by two colors, the same pattern adapts to light and dark themes with a custom-property swap. For ready-made variants, browse the matching snippets in the catalog.
FAQ
Does it use any images?
No. Every pattern is drawn with CSS gradients (conic, radial, linear and repeating-linear), so there are no image requests, the result is infinitely scalable, and it stays crisp on any screen density.
How do I theme the pattern to match my site?
Pick the foreground and background colors with the swatches (or paste any hex), and use the size, thickness and angle sliders to tune the scale. Copy the generated block and drop it on any element — swap the two colors to re-theme it later.
Is a CSS pattern heavy to render?
No. Gradients are GPU-friendly and a tiled background-size means the browser paints one small cell and repeats it, so even full-page patterns are cheap compared with a background image.