tellogs.com

コニックグラデーション

グラデーション生成

コニックグラデーションは、CSSのconic-gradient()関数で作成する円錐形のグラデーションです。中心点を軸にして色が回転するように変化する特徴があります。時計の針のように角度で色が変わるため、円形チャートやカラーホイールの表現に最適です。

コニックグラデーションの大きな特徴は、色の変化が円周に沿って起こる点です。リニアやラジアルとは異なり、円の中心から放射状ではなく、時計回りに色が遷移します。fromキーワードで開始角度を指定でき、デフォルトでは上(0度)から開始されます。

このグラデーションタイプは、パイチャートやドーナツチャートのCSS表現、プログレスバー、カラーピッカーのUIなどに活用できます。border-radiusと組み合わせて円形にすれば、色付きの円形インジケーターも簡単に作成可能です。CSSコードページで生成コードの活用方法をご確認ください。

グラデーション生成を使ってみましょう

このページの内容を、グラデーション生成で実際に試してみましょう。

グラデーション生成を開く