repeating-conic-gradient で「透明」を表す市松模様の背景を1行で作る

repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) を background-size で並べると、画像エディタでおなじみの透明チェッカーができる。

どんな時に使う？

カラーピッカーやアルファ値のプレビュー、透過 PNG・SVG のアイコン一覧など、「ここは透明です」と見せたいとき。
画像ファイルを用意せずに CSS だけで済ませたいとき。

コード

css

.transparent-preview {
  background-image: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%);
  background-size: 16px 16px; /* 1マスは 8px になる */
}

円錐グラデーションを 25% ずつ灰・白・灰・白と回すと、中心で4分割された 2×2 の市松になる。これを background-size のタイルで繰り返すと全面チェッカーになる。マスの大きさは background-size を変えるだけ。投稿者によると Firefox のカラーピッカーでも実際にこの書き方が使われている。

応用: 半透明の色を上に重ねてプレビュー

css

.swatch {
  background:
    linear-gradient(var(--color), var(--color)),
    repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

上のレイヤーに --color（例: rgb(255 0 0 / 0.4)）を置くと、透け具合が一目で分かる。

注意点

ダークテーマでは #ccc / #fff が眩しいので、#444 / #333 などに差し替えるか light-dark() を使う。
conic-gradient は全モダンブラウザ対応。
ほかのグラデーション模様はグラデーションを重ねて画像なしの背景パターン（方眼紙・ジグザグ・水玉など）を作るも参照。

出典

@JForg の投稿