CSS Checker Pattern Generator

Checker patterns in pure CSS

The checkerboard is the canonical tileable pattern. Photoshop, GIMP, Krita and Figma all use a grey-and-white 8×8 or 16×16 checker as the universal "this region is transparent" indicator — a convention so ingrained that designers read it as "alpha" without ever being told. The same shape doubles as a racing flag, a chess board, a 1960s ska two-tone, a Vans deck and a retro 16-bit game tile. The whole thing is two interleaved grids of squares, and modern CSS handles it in a single property — no SVG, no images.

The classic CSS-Tricks technique stacks four 45° gradients. It works, but it is verbose. The modern, much shorter approach uses repeating-conic-gradient, which became fully cross-browser supported a few years ago:

.checker {
  background: repeating-conic-gradient(
    #000 0% 25%, #fff 0% 50%);
  background-size: 32px 32px;
}

That two-line rule produces a perfect 16-px checker. The legacy alternative — useful if you must support old Safari — is two stacked linear-gradient(45deg, ...) backgrounds with one offset by half a tile. Both compile to a single GPU-composited layer, so performance is essentially free even on mobile.

When to use CSS vs SVG

CSS gradients beat SVG <pattern> for simple, axis-aligned, two-colour patterns: checker, plain stripes, dots on a grid. The whole declaration fits in under 100 bytes and changes via a single CSS custom property. SVG wins as soon as the geometry gets irregular — chevrons, organic shapes, multiple overlapping motifs, or any time you need precise stroke control. For an alpha-channel checker on a photo editor, CSS is the right answer: short, cacheable as part of the stylesheet, and trivially recolourable.

Variants and use cases

• Photoshop alpha — light grey #ccc and white, 8×8 px tile — the universal transparency indicator.
• Racing flag — black and white, 32×32 or larger; ideal for hero blocks on motorsport sites.
• Ska two-tone — black and white, applied to ribbons and 1960s music branding.
• Game UI — saturated colours and pixel-snapped sizes recreate a 16-bit feel.
• Print backgrounds — works on print because gradients render as bitmaps in print stylesheets.

Responsive sizing with custom properties

Tie the tile size to a CSS variable to make it resize on the fly without a rebuild:

:root { --checker-size: 16px; }
.checker {
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
  background-size: var(--checker-size) var(--checker-size);
}
@media (min-width: 1024px) { :root { --checker-size: 32px; } }

For Tailwind, use the arbitrary-value escape: bg-[repeating-conic-gradient(#000_0%_25%,#fff_0%_50%)] bg-[size:24px_24px]. Verbose, but it survives Tailwind's purge because the whole string is literal.

FAQ

CSS or SVG for checker? CSS for plain two-colour checker — shorter, single layer, trivially recolourable. SVG only if you need irregular cells, varying sizes per row, or rotation animations on individual squares.

Can I simulate Photoshop's transparency indicator? Yes, exactly — Photoshop's default 8×8 grey-white checker is reproducible with repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) sized at 16×16 px (each cell is 8 px).

Does it work in print? Yes — Chrome, Safari and Firefox all rasterise gradients in print stylesheets, so the checker appears as expected on PDF export.

Multiple sizes responsively? Yes — drive background-size from a CSS custom property and switch it per breakpoint. No rebuild required.