角度
選択中のストップを編集
生成CSSコード
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6
50%, #ec4899 100%);
前景色（パターン色）
背景色
サイズ
線の太さ
角度
生成CSSコード
✅ コピーしました！
CSSグラデーションとは？
CSSグラデーションは、JavaScriptや画像ファイルを使わずに、CSS単体で美しいグラデーション背景を実現できる技術です。backgroundプロパティに指定するだけで、2色以上の色が滑らかに変化する表現が可能。ページの表示速度に影響せず、Retinaディスプレイでも常に鮮明に表示されます。
「カラーストップ」と呼ばれる色の通過点を複数指定することで、3色・4色と複雑なグラデーションも自在に設計できます。また、rgba()やhsla()で透明度を持たせることで、重ね合わせ効果（グラスモーフィズム等）も簡単に実現できます。
グラデーションの種類と使い分け
| 種類 | CSSプロパティ | 特徴 | 主な用途 |
|---|---|---|---|
| 線形（Linear） | linear-gradient() |
角度を指定して直線的に変化 | ヒーロー背景・ボタン・ヘッダー |
| 放射（Radial） | radial-gradient() |
中心から放射状に広がる | フォーカス演出・スポットライト効果 |
| 円錐（Conic） | conic-gradient() |
中心を軸に角度で色が変わる | 円グラフ・プログレスリング・ホイール |
CSSだけで作る背景パターン
背景パターンも「グラデーションを繰り返す（repeating-linear-gradient）」「複数のグラデーションを重ねる（background-imageに複数値）」という手法で実現できます。画像ファイルを使わないため:
- ファイル容量ゼロ — HTTP通信が発生しない
- どんな解像度でも鮮明 — 4Kディスプレイでも劣化なし
- カラー変更が即時 — CSSの値を変えるだけ
- アニメーション対応 —
@keyframesで動く背景にできる
2026年トレンド：グラデーションデザイン
2026年のWebデザインにおけるグラデーショントレンドをまとめます。
- メッシュグラデーション — 複数の放射グラデーションを重ね、有機的な「溶け合う」表現。Figmaの「Mesh Gradient」機能でも話題に
- グラスモーフィズム — 半透明グラデーション＋
backdrop-filter: blur()で磨りガラス風UI - グレインオーバーレイ — ざらつきテクスチャをグラデーションに重ねてアナログ感を演出
- デュオトーン — 写真に2色グラデーションを
mix-blend-modeで合成し印象的なビジュアルに