Checkerboard Pattern (SVG) Generator

The checkerboard pattern: a 4,000-year-old design primitive

The checkerboard — two contrasting colours alternated across an n × n grid — is one of the oldest visual motifs in human design. Egyptian artisans used it on tomb walls; medieval heraldry codified it as chequy; the modern 8×8 board comes from chess, which standardised the grid around the 7th century. Outside games, the pattern shows up on the chequered flag (used in horse racing since the 1880s and in Formula 1 since 1906), on commercial-kitchen flooring, and on the default transparency canvas of every raster editor — Photoshop ships a 32×32 grey grid (#cccccc and #ffffff) that has become an industry shorthand for "this pixel has alpha".

In contemporary UI design, the checkerboard does three jobs: it indicates transparency in image previews; it carries racing/karting brand associations; and it acts as a retro motif in nostalgic landing pages. It also makes a fine reference grid when calibrating a screen, because the eye picks up any geometric distortion immediately.

Pure-CSS implementation

The classic CSS recipe sandwiches four linear-gradients with 45° and 135° stops. Set the background-size to 2×cell-size and the grid repeats forever:

.checker {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

An SVG alternative uses a <pattern> with two <rect>s — fewer rules, easier to scale, and ready for export to print or PDF.

Choosing cell size and contrast

For UI transparency hints, 8 to 32 pixel cells with a low-contrast pair (light grey + white) are the sweet spot — small enough to read as "background", neutral enough to keep the foreground readable. Below 4 px the pattern produces moiré on most LCDs; above 64 px it looks like a brand element, not a transparency indicator. Cell colours don't have to be black and white: any contrasting pair works, but stick to similar luminance values if the pattern should sit behind text.

Sibling patterns

• Draughts/checkers board — same 8×8 layout, just different game.
• Chinese chess (Xiangqi) — actually a grid, not a checker, because pieces sit on intersections.
• Football pitch stripes — alternating bands rather than a grid; produced by mowing the grass in opposite directions.
• Houndstooth and gingham — woven cousins that read as checkered at distance but have woven detail up close.

FAQ

What cell size should I use? 8–16 px for transparency canvases, 20–32 px for decorative backgrounds, 40 px+ for hero banners.

Does it have to be black and white? No — any high-contrast pair works. For text overlays, pick two close shades of the same colour so the checker recedes visually.

SVG or CSS gradients — which is better? CSS is fine for fixed-size DOM blocks. SVG scales better for print, exports cleanly to PDF and is easier to reuse across documents.

Why does the pattern shimmer when I scroll? Sub-pixel rendering on high-DPI screens — increase the cell size or set image-rendering: pixelated on the container.