Conic-Gradient()を使用して時計回りの綺麗なグラデーションから市松模様を描く方法

Conic-Gradient()の基本

円回転方向にグラデーションをかけます。

height: 100px;
width: 100px;
background: conic-gradient(red, yellow, green);

赤、黄、緑の右回り順でグラデーションをかけました。

綺麗ですね。

おっと、Top位置（0時の位置）の境目が気になりますね。

隣り合う色を揃えてみましょう。

background: conic-gradient(red, orange, yellow, green, red);

はい。綺麗ですね。最初と最後の色を合わせました。境目がなくなりましたね。

グラデーションの変化分の両端を指定すれば。くっきりな境目になりますね。

background: conic-gradient(
  red 45deg,
  orange 45deg 90deg,
  yellow 90deg 180deg,
  blue 180deg 270deg,
  purple 270deg
);

このように回転する方向にグラデーションをかけることができます。

HSL色空間によるグラデーションの指定も便利かもしれません。

background: conic-gradient(
 hsl(360, 100%, 50%),
 hsl(315, 100%, 50%), 
 hsl(270, 100%, 50%), 
 hsl(225, 100%, 50%),
 hsl(180, 100%, 50%),
 hsl(135, 100%, 50%),
 hsl(90, 100%, 50%),
 hsl(45, 100%, 50%),
 hsl(0, 100%, 50%)
);

HLS色空間は、色相、彩度、輝度の概念で構成される色の表現方法です。色味を0から360度で表します。

中心位置と開始角度の調整

中心点の移動、開始角度を調整できます。

background: conic-gradient(from 45deg at 60% 30%, white, blue, white);

応用編

市松模様を描きます。

まずは1マスの模様を描きましょう。

background: conic-gradient(
 #25a37d 90deg,
 #261818 90deg 180deg,
 #25a37d 180deg 270deg,
 #261818 270deg
);

これをサイズ25%くらいで繰り返してみましょう。

background: conic-gradient(
 #25a37d 90deg,
 #261818 90deg 180deg,
 #25a37d 180deg 270deg,
 #261818 270deg) top left / 25% 25%;

background: conic-gradient(
 #25a37d 0.25turn,
 #261818 0.25turn 0.5turn,
 #25a37d 0.5turn 0.75turn,
 #261818 0.75turn) top left / 25% 25% repeat;

出来上がりです。とってもいい感じの市松模様ですね。