🌅CSSグラデーションジェネレーター

linear・radial・conicの違い

CSSのグラデーションには、色の変わり方が異なる3つの関数があり、どれもbackgroundプロパティに書いて使います。

• linear-gradient：linear-gradientは、指定した角度の直線に沿って色が変わる線形のグラデーションです。
• radial-gradient：radial-gradientは、中心位置から外側へ向かって円または楕円の形に色が広がる円形のグラデーションです。
• conic-gradient：conic-gradientは、中心位置のまわりを時計回りに一周しながら色が変わる扇形のグラデーションです。

角度と方向キーワードの対応

linear-gradientの角度は、0degが下から上へ向かう向きで、数値が増えるほど時計回りに回ります。角度は「to right」のような方向キーワードでも書け、90degは「to right」、180degは「to bottom」と同じ向きになります。

色停止点と透明度の書き方

色停止点（カラーストップ）とは、グラデーションの中でその色になる位置のことで、0%が始点、100%が終点を表します。たとえば「#3B82F6 0%, #8B5CF6 100%」は、始点の青から終点の紫へ色が変わる指定です。

• #RRGGBB形式：#RRGGBB形式は、赤・緑・青の強さを2桁ずつの16進数で表す色の書き方で、#FF0000は不透明な赤を表します。
• rgba形式：rgba形式は、赤・緑・青の値（0〜255）に透明度（0〜1）を加えた色の書き方で、透明度0.5は半分透けた色を表します。