神戸から全国対応・WEB集客サポートまねきねこ企画のブログ：CSSでグラデーションを作る時の考え方

グラデーションは「色をどの方向に補間するか」で決まる

直線・放射・円錐の3系統と、その繰り返し版の計4種類。考え方は共通で、軸とカラーストップを置くと、その間はブラウザが自動でなめらかに埋める。

linear-gradient（直線）

・軸は一本の直線
・方向を決めて、軸に沿って色が変化
・方向指定は右へ／下へ／角度などで表現
・カラーストップで「どの位置でどの色」を置く
・イメージは定規の上に色を並べ、端から端へグラデーション
・使いどころは帯状の背景、ボタン、ヒーローエリア

radial-gradient（放射）

・中心から外へ向かって色が広がる
・形は円か楕円を選べる
・中心位置をずらしてハイライト感を作れる
・イメージは水面の波紋に色がついて外へ広がる感じ
・使いどころは円形のハイライト、カードの光だまり

conic-gradient（円錐）

・中心を軸に角度方向へ色が回る
・開始角度を決めて、扇形のように色が切り替わる
・イメージはホールケーキをぐるっと塗り分ける
・使いどころは円グラフ風の表現、ダイヤル、色相環

repeating-◯◯-gradient（繰り返し）

・上の3種を一定範囲で繰り返す版
・指定した最後のストップまでが「タイルの1単位」になり連続する
・イメージはストライプや市松模様をタイル状に敷き詰める
・使いどころはストライプ背景、等間隔のパターン

共通ルール（ここだけ押さえれば迷わない）

・カラーストップは位置と色を並べるだけ（途中は自動補間）
・透明度つきの色も可。重ねると色が混ざる
・背景は複数レイヤーを重ねられる。カンマで並べると上から順に積層
・方向や形が違っても本質は同じ。軸を決め、ストップを置く

使い分けの目安

・直線は面積の広い帯やボタンの深み
・放射は光源やスポット感
・円錐は角度の情報や円形の装飾
・繰り返しは規則的な模様