CSS グラデーション生成

CSS グラデーションの歴史

CSS グラデーションは CSS3 で導入されました。 初期の実装では -webkit-gradient という独自構文が使われていましたが、 2012年頃に現在の linear-gradient / radial-gradient 構文に統一されました。 現在はすべてのモダンブラウザでベンダープレフィックスなしで利用できます。

conic-gradient

conic-gradient は円錐型のグラデーションで、 中心点から角度に沿って色が変化します。 色相環やパイチャートの表現に活用でき、CSS だけで円グラフを描くことも可能です。 2018年頃から主要ブラウザでサポートされています。

グラデーションのパフォーマンス

CSS グラデーションは画像ファイルではなく、ブラウザが数学的な関数として描画します。 そのため解像度に依存せず、Retina ディスプレイでもくっきり表示されます。 また、画像のダウンロードが不要なためページの読み込み速度にも貢献します。