CSSグラデーション生成

リファレンス

CSSグラデーションとは？

CSSグラデーションは、2つ以上の色の間を滑らかに遷移する画像です。background-imageプロパティで使用され、リニア（直線）、ラジアル（放射）、コニック（円錐）の3種類があります。グラデーションはベクターベースなので、どの解像度でも鮮明に表示されます。

グラデーションの種類

linear-gradient — 直線方向に色を遷移。角度または方向キーワードで制御。radial-gradient — 中心点から外側に色を放射状に遷移。conic-gradient — 中心点を軸に色を円錐状に遷移。円グラフの作成に便利。

カラーストップ

カラーストップはグラデーション内で色が配置される位置を定義します。各ストップは色と任意のパーセンテージ位置で構成されます。ストップを追加するほど複雑なグラデーションが作成できます。ストップ間の色は自動的に補間されます。

プライバシー

すべてのグラデーション生成はブラウザで100%実行されます。データはサーバーに送信されません。