CSS pattern generator

background-color: #12151c;
background-image: conic-gradient(#6b46ff 25%, #12151c 0 50%, #6b46ff 0 75%, #12151c 0);
background-size: 40px 40px;

What this CSS pattern generator does

The tool builds seven classic background patterns from gradients only — checkerboard, dots, grid, diagonal stripes, vertical stripes, zigzag and crosshatch — and lets you tune the two colors, the tile size (6–120px), the line or dot thickness (1–20px) and, for diagonal stripes, the angle (0–180°). The 200px preview updates on every change and the copyable block is the exact CSS that draws it, usually three or four declarations.

How to use it

1. Choose a Pattern from the dropdown.
2. Set Foreground (lines, dots, dark squares) and Background colors with the swatch or by typing a hex value.
3. Drag Size. For stripes this is the width of one stripe; for the others it is the tile that repeats.
4. Drag Thickness (dots, grid, crosshatch) or Angle (diagonal stripes) when the slider is shown — patterns that do not use a control hide it.
5. Click Copy and paste the declarations into your rule.

The gradient behind each pattern

Pattern	Technique	Key line of CSS
Checkerboard	conic-gradient with four 25% hard stops, tiled	conic-gradient(#fg 25%, #bg 0 50%, #fg 0 75%, #bg 0)
Dots	radial-gradient circle of thickness px, transparent after	radial-gradient(#fg 2px, transparent 2px) + background-size
Grid	two linear-gradients (0° and 90°) each drawing one thickness px line	linear-gradient(#fg 1px, transparent 1px), linear-gradient(90deg, #fg 1px, transparent 1px)
Diagonal stripes	repeating-linear-gradient at angle with two equal bands	repeating-linear-gradient(45deg, #fg 0 20px, #bg 20px 40px)
Vertical stripes	same at 90°	repeating-linear-gradient(90deg, #fg 0 20px, #bg 20px 40px)
Zigzag	four linear-gradient triangles (45°, 135°, 225°, 315°) with offset positions	background-position: 20px 0, 20px 0, 0 0, 0 0
Crosshatch	two repeating-linear-gradients at 45° and -45° with thin lines	repeating-linear-gradient(45deg, #fg 0 1px, transparent 1px 20px)

Two ideas do most of the work. Hard color stops — writing #bg 0 50% means “start this color at the same position the previous one ended,” so there is no blend and you get crisp shapes. Tiling — background-size makes the browser paint one small cell and repeat it, which is why a 40px checkerboard costs the same as a 400px one. Repeating gradients skip background-size entirely because the gradient itself repeats.

Worked example: dotted grid for a hero section

Settings: Dots, foreground #6b46ff, background #12151c, size 24, thickness 2. The tool outputs:

background-color: #12151c;
background-image: radial-gradient(#6b46ff 2px, transparent 2px);
background-size: 24px 24px;

To fade the dots toward the bottom, layer a second gradient over them — later images in the list paint on top:

.hero {
  background-color: #12151c;
  background-image:
    linear-gradient(to bottom, transparent 40%, #12151c),
    radial-gradient(#6b46ff 2px, transparent 2px);
  background-size: 100% 100%, 24px 24px;
}

Note that background-size takes one value per image, in the same order.

Tips and gotchas

• Keep sizes on an even pixel grid. A 25px checkerboard at 1x zoom lands on half pixels and blurs; 24 or 32 stays sharp. Stripe widths should be whole pixels for the same reason.
• Contrast for readability. A pattern under text should stay subtle: pick a foreground a few steps from the background — the tints and shades tool gives you those steps — and run the text color through the contrast checker.
• Theming with custom properties. Replace the two hex colors with var(--pattern-fg) and var(--pattern-bg) and set them once per theme in :root and [data-theme="dark"].
• Older browsers. conic-gradient (checkerboard) needs Chrome 69, Firefox 83 or Safari 12.1. The other patterns use linear/radial gradients and work everywhere, including the double-position #bg 0 50% syntax (Chrome 71, Firefox 64, Safari 12.1); for older targets, write the stop twice (#bg 0, #bg 50%).

For the theory and more recipes read CSS background patterns and the pattern generator announcement.

Related tools and snippets

• Checkerboard pattern snippet — the conic-gradient recipe with an explanation and sliders.
• Dotted grid background snippet — ready-made dot grid with controls.
• Diagonal stripes snippet and zigzag pattern — standalone versions of two patterns here.
• Gradient generator — smooth gradients for backgrounds, as opposed to hard-stop patterns.
• Color mixer — blend two brand colors to find a foreground that sits well on the background.