CSSグラデーション生成

CSSグラデーションの基本と魅力

複数の色が滑らかに変化する「グラデーション」は、Webサイトの背景やボタン、テキストを目立たせるために欠かせないデザイン要素です。 モダンなWebデザインでは、原色ではなく「同系色のグラデーション」や「パステルカラーのブレンド」を使うことで、フラットデザインに奥行きと洗練された印象を与えます。

linear-gradient (線形グラデーション)

最もよく使われるのが、直線的に色が変化する linear-gradient です。
background: linear-gradient(角度, 開始色, 終了色); という構文で指定します。
角度は右上へ向かう 45deg や、右下へ向かう 135deg などが非常に人気で、光の差し込む方向を意識すると美しい仕上がりになります。

radial-gradient (円形/放射グラデーション)

中心から外側に向かって円形・楕円形に色が広がるのが radial-gradient です。
メインビジュアルの中央に視線を集めたいときや、要素を立体的な光の球体のように見せたいときに活用されます。
例: background: radial-gradient(circle, 内側の色, 外側の色);

美しいグラデーションを作るコツ

• 色相（色合い）を少しだけズラす： （例）青 → 水色、赤 → オレンジ。色相環で隣り合う色を選ぶと失敗しません。
• 補色を混ぜない： 赤と緑、青と黄色などの反対色を直接混ぜると、真ん中の色が濁って（グレーっぽく）汚くなります。どうしても混ぜたい場合は、3色目の経由色（中間色）を挟むのがコツです。