Transparency Checkerboard Generator

Features

• Checkerboard and 45 degree stripe patterns
• Pick the foreground and background colours with a colour picker
• Cell size adjustable from 4 to 64px
• ⚠️ All five 0/25/50/75/100 stops are written, so the browser cannot turn one into a gradient
• The checkerboard ships both a conic-gradient and a four-layer linear-gradient version, with the trade-off explained
• The diagonal ships both a repeating-linear-gradient and a tiled version
• Choose a single background shorthand or separate background-image, background-size and background-position lines
• Live preview; invalid colours fall back to the default so the generated CSS is always valid
• Everything runs in your browser and nothing is uploaded

How to use

1. Choose a checkerboard or diagonal pattern and set the cell size
2. Pick the foreground and background colours
3. Choose shorthand or separate properties and watch the preview
4. Copy the generated CSS

FAQ

Why is the checkerboard a conic-gradient? Can it not use a repeating gradient?

A checkerboard is two-dimensional, while `repeating-linear-gradient` is one-dimensional (stripes) — a single one cannot draw squares. So a checkerboard is either one `conic-gradient` with four sectors per cell, or four stacked `linear-gradient` layers. Stripes are one-dimensional, which is where `repeating-linear-gradient` fits. Both are provided so you can choose by target browser.

What happens if a stop is left out?

No error, but the pattern breaks. Stop at `50% 75%`, for example, and the browser turns the remaining segment into a gradient, so the last quarter of each cell goes blurry — it looks about right until you stare at it. So all five boundaries 0/25/50/75/100 are written explicitly here, and a test checks that both 25% and 75% are present.

Should I use the shorthand or separate properties?

Use separate properties when merging into styles you already have (`background-image`, `background-size`, `background-position` on their own lines), because then you can change one without disturbing the other layers; a single `background` shorthand is shorter when writing a backdrop from scratch. The tiled diagonal and the linear checkerboard are multi-layer, and a shorthand would write them as one long line, so those always come out as separate properties here.