Checkerboard pattern generator — PNG and CSS

How to use Checkerboard

1. Set Width and Height in pixels (1–8000, default 800 × 800).
2. Set Square size (2–400 px, default 50 px).
3. Pick Colour 1 (white) and Colour 2 (near black #111827).
4. The preview updates as you change values. Download the PNG, note the Board count, or copy the CSS (no image needed).

What it does and when to use it

Checkerboards turn up in many places: the grey-and-white grid that design apps show behind transparent areas, chess and draughts boards, racing flags, retro floor tiles, and test charts for screens and cameras. Game makers use them as placeholder textures, and video editors use them to check scaling and alignment.

On a website, the CSS version is usually the better choice, since it needs no download and stays crisp at every zoom level. Use the PNG for slides, 3D textures, printing and anything that cannot read CSS. For a single flat colour, use Solid Color Image, and for a smooth blend, Gradient Image. If you cut objects out of photos, the Background Remover makes the transparent PNGs that such a grid is used to preview.

How it works

For each pixel, the tool divides x and y by the square size, rounds down, and adds the two results. If the sum is even, the pixel takes Colour 1; if odd, Colour 2. The board count is the width and height divided by the square size, rounded up. The PNG is compressed in your browser at the highest level, and the CSS uses a conic-gradient repeated every two squares.

Worked examples

Outputs from the tool’s own function.

Default board. 800 × 800 px with 50 px squares gives “Board: 16 × 16 squares”, a PNG of about 3.3 KB, and this CSS:

background-color: #ffffff;
background-image: conic-gradient(#111827 25%, transparent 0 50%, #111827 0 75%, transparent 0);
background-size: 100px 100px;

A board that does not divide evenly. 1000 × 700 px with 64 px squares gives “Board: 16 × 11 squares”; the last column and row are partial.

A transparency grid. 512 × 512 px, Square size 8, Colour 1 #cccccc and Colour 2 #ffffff gives 64 × 64 squares and background-size: 16px 16px;.

A chessboard. For a real 8 × 8 board, make the width and height eight times the square size, for example 800 × 800 with 100 px squares.

Limits and tips

• Very small squares on a large image make a dense pattern that can shimmer on screens; that is normal.
• The PNG has no transparency; both colours are solid.
• Maximum size is 8000 × 8000 px; larger values are reduced to 8000.