PLAY CSS
jaen

背景

conic-gradient()

conic-gradient() は、中心のまわりを時計の針のように回りながら色が移り変わるグラデーション画像を作る関数です。円グラフや色相環のような模様を描けます。

構文conic-gradient( …
conic-gradient(
  [ from <angle> ]? [ at <position> ]? ,
  <angular-color-stop-list>
)

<angular-color-stop-list> =
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#
<angular-color-stop> = <color> <angle-percentage>{0,2}
<angular-color-hint> = <angle-percentage>

プレビュー

プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  background: conic-gradient(
    from 45deg,
    #88d1c7,
    #77a7d7,
    #eaac3a,
    #88d1c7
  );
}

コントロール

conic-gradient()
repeating-
from <angle>45deg
at <position>50% 50%

四角の中をクリック・ドラッグして中心を動かせます

横の位置
縦の位置
angular-color-stop-list

マーカーをドラッグして位置を動かせます

#88d1c7
色
位置
#77a7d7
カラーヒント（前の色との中間点）
色
位置
#eaac3a
カラーヒント（前の色との中間点）
色
位置
#88d1c7
カラーヒント（前の色との中間点）
色
位置

解説

開始角と中心

  • from の角度は linear-gradient() と同じく 0deg が真上で、時計回りに増えます。省略すると from 0deg です。
  • at のあとに中心を background-position と同じ書き方で指定します。省略すると center です。
  • radial-gradient() と違ってサイズの指定はなく、色は中心から要素の端までまっすぐ伸びます。

色の位置は角度で書く

  • 位置は 90deg のような角度か、1 周に対する % で書きます（25% = 90deg）。どちらも開始角からの回転量です。
  • 最初の色と最後の色が 1 周したところで突き当たるので、最後に最初と同じ色を置くと継ぎ目が消えます。初期値の 4 つ目の色はそのためのものです。

円グラフ

色ごとに 2 つの位置を書いて区間をべた塗りにすると、円グラフになります。前の色より小さい位置は前の位置にそろえられるので、conic-gradient(#88d1c7 0 25%, #77a7d7 0 60%, #eaac3a 0) のように始まりを 0 と書けば、終わりの位置だけで区切れます。border-radius: 50% と組み合わせると丸い円グラフになります。

repeating-conic-gradient()

最初の色から最後の色までの角度を繰り返します。repeating-conic-gradient(#88d1c7 0 15deg, #77a7d7 0 30deg) は中心から放射状に伸びる縞になります。

参考リンク

MDN Web Docsconic-gradient()SpecificationCSS Images Module Level 4Can I useconic-gradient()
PLAY CSS