CSS グラデーションを作る方法

CSS グラデーションを使えば、画像ファイルなしで滑らかな色の遷移を作成できます。画像より軽量で、画面サイズに完璧に対応し、カスタマイズも簡単です。

CSS グラデーションの種類

線形グラデーション(linear-gradient) — 色が直線方向(上下、左右、または任意の角度)に変化します。

background: linear-gradient(135deg, #667eea, #764ba2);

放射状グラデーション(radial-gradient) — 色が中心点から円形または楕円形に広がります。

background: radial-gradient(circle, #667eea, #764ba2);

円錐状グラデーション(conic-gradient) — 色が中心点を軸に回転します。色相環のような見た目です。

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

グラデーションを視覚的に作る方法

1. グラデーションの種類を選ぶ — 線形か放射状を選び、角度や位置を調整します。
2. カラーストップを追加 — クリックしてグラデーション上のさまざまな位置に色を追加します。各色とその位置を調整します。
3. CSS をコピー — 生成されたコードをコピーし、スタイルシートに貼り付けます。

ビジュアルジェネレーターを使うほうが構文を手書きするより速く、特に複数のカラーストップがある場合に便利です。

よくあるグラデーションのパターン

ヒーローセクションの背景 — 控えめな 2 色のグラデーションで、テキストの邪魔をせずに奥行きを与えます。

background: linear-gradient(135deg, #0f172a, #1e3a5f);

ボタンのハイライト — 軽いグラデーションでボタンに立体感を与えます。

background: linear-gradient(180deg, #3b82f6, #2563eb);

画像のオーバーレイ — グラデーションのオーバーレイで写真の上にあるテキストの可読性を高めます。

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

アクセントボーダー — グラデーションをボーダーとして使い、視覚的な面白さを加えます。

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

ヒント

• 控えめにする — 良いグラデーションはほとんど目立ちません。似た 2 色の間のわずかな変化が奥行きを与えます。派手な虹色のグラデーションがプロらしく見えることはほとんどありません。
• 画像の代わりにグラデーションを使う — CSS グラデーションはネットワークリクエストなしに即座に読み込まれます。装飾的な背景画像はできるだけグラデーションに置き換えましょう。
• ダークモードでテストする — 明るい背景でよく見えるグラデーションが、ダークモードで色あせたり違和感が出たりすることがあります。必要に応じてテーマごとに別のグラデーションを定義してください。
• テキストのコントラストに注意 — グラデーションの上にテキストを置く場合は、もっとも明るい部分や暗い部分だけでなく、グラデーション全体で読みやすいかを確認しましょう。