覚えておこう! CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法

CSSグラデーションといえば、linear-gradient()radial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。

conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。

CSSのconic-gradient()関数を使用した美しいグラデーション

Use conic gradients to create a cool border

まずは、実際のデモをご覧ください。
conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。

See the Pen
Conic Gradient Border
by Adam Argyle (@argyleink)
on CodePen.

また、要素の上でマウスを移動すると、グラデーションの角度が変化するデモもあります。CSSの変数を使用して、JavaScriptで値を操作します。

See the Pen
Conic Gradient Border
by Terry Mun (@terrymun)
on CodePen.

HTMLはシンプルで、div要素の矩形にボーダーを表示します。

このグラデーションを実装するポイントは、CSSのborder-image-sourceプロパティとconic-gradient()です。

border-image-sourceプロパティは、要素のボーダーを作成するために使用されるソース画像を設定できます。画像の値を受け入れる他のプロパティと同様に、CSSグラデーションも設定できます。

conic-gradient()はグラデーションを中心点から拡げる放射ではなく、中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。
参考: W3C

conic-gradient()には、最初の引数に回転させる角度、2番目の引数に中心点(省略するとデフォルトで中央)、あとはグラデーションの開始と終了を設定します。

対応ブラウザは、下記の通りです。
border-image-sourceは、すべてのブラウザにサポートされています。

border-image-sourceのサポートブラウザ

border-image-sourceのサポートブラウザ

conic-gradient()はIEを除く、すべてのブラウザにサポートされています。

conic-gradient()のサポートブラウザ

conic-gradient()のサポートブラウザ

sponsors

top of page

©2022 coliss