カラーグラデーションとは何か、CSSでの作り方

CSSのカラーグラデーションとは、画像ファイルを一切使わずにブラウザ上で2色以上の色を滑らかに変化させる機能です。この一点だけでも、グラデーションはフロントエンド開発者にとって非常に実用的なツールといえます。HTTPリクエストを削減でき、どの解像度でも完璧にスケールし、コード1行で変更できます。CTAボタンのスタイリング、ヒーローセクションの背景作成、カードコンポーネントへの奥行き追加など、CSSグラデーションの仕組みを理解することで、色の遷移を細部まで自在にコントロールできるようになります。

linear-gradientの解説

CSSの linear-gradient 関数は、直線に沿って色を遷移させます。基本的な構文は次のとおりです。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction パラメータでグラデーションの方向を指定します。to right、to bottom left などのキーワード、または 135deg のような角度を使えます。方向を省略した場合のデフォルトは to bottom (上から下、180度) です。

カラーストップを使うと、色の位置を細かく制御できます。各ストップには任意で位置を指定できます。

/* 2色、左から右へ */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* 3色、位置を明示的に指定 */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

各ストップにパーセンテージで位置を指定すると、ハードエッジ (同じ位置に2つのストップを設定) を作ったり、遷移ゾーンを広げたり縮めたりできます。これはストライプ模様やプログレスバーの基本テクニックです。カラー値を使う前に、CSSでの色の解釈方法を理解しておくと役立ちます。HEX to RGB変換ガイドでは、各フォーマットの違いと使い分けについて詳しく説明しています。

radial-gradientの解説

CSSの radial-gradient は、中心点から楕円形または円形に外側へ向かって色を広げます。構文には、形状・サイズ・位置の3つのオプションパラメータがあります。

background-image: radial-gradient(shape size at position, color-stop1, color-stop2);

各パラメータの役割は次のとおりです。

• 形状 (shape): circle で真円になります。デフォルトの ellipse は要素の形に合わせて伸縮します。
• サイズ (size): closest-side、farthest-corner などのキーワードや具体的な長さで、グラデーションの広がりを制御します。
• 位置 (position): background-position と同じように機能します。キーワード、パーセンテージ、ピクセル値が使えます。

/* スポットライト効果 */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

radial-gradientは、スポットライト効果、光るボタン、ヒーロー画像へのソフトなビネット効果などに最適です。

conic-gradient - 新世代のグラデーション

CSSの conic-gradient 関数は3種類の中で最も新しく、多くの開発者がまだ使いこなせていない機能です。外側に広がるのではなく、カラーホイールや円グラフのように中心点を軸に色が回転します。W3C CSS Images Level 4仕様で正式に定義されており、現在はすべてのモダンブラウザでサポートされています。

/* 円グラフ - 青40%、コーラル60% */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* フルカラーホイール */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

from Xdeg で開始角度を回転させ、at X% Y% で中心位置をずらすこともできます。

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

純粋なCSSで作る円グラフ、チェッカーボード模様、動的なローディングスピナーなどに活用できます。

繰り返しグラデーション

CSSには repeating-linear-gradient と repeating-radial-gradient があり、大量のカラーストップを手動で書かなくても、グラデーションパターンを要素全体にタイル状に繰り返せます。重要なルールは、最後のカラーストップが100%に達していない場合にのみパターンが繰り返されるという点です。

/* 斜めストライプ */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* 同心円リング */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

繰り返しグラデーションはパフォーマンスの面でも優れています。ブラウザがコンパクトなCSSルールからパターン全体を生成するため、画像アセットのダウンロードが不要です。

実践的な使用例

グラデーションボタン

鮮やかなCTAボタンはよくある使用例です。background-size を設定してホバー時にアニメーションさせるのがポイントです。

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

フルページのヒーロー背景

body やヒーローセクションにCSSのグラデーション背景を設定すると、ページの視覚的な雰囲気がすぐに決まります。

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

画像へのダークオーバーレイ

写真の上にグラデーションを重ねることで、別のオーバーレイ要素を追加せずにテキストを読みやすくできます。

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

テキストグラデーション

テキストにグラデーションを適用するには、3つのプロパティを組み合わせます。

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

background-clip: text は一部のブラウザでまだ -webkit- プレフィックスが必要なため、必ず両方の宣言を含めてください。グラデーションを組む前にカラーを確認したい場合は、カラーエクスプローラーツールでカラーを探して検証できます。

ブラウザ互換性とフォールバック

linear-gradientとradial-gradientは、2013年以降すべての主要ブラウザで完全にサポートされています。conic-gradientは2021年に広くサポートされるようになりました (Chrome 69、Firefox 83、Safari 12.1)。Can I Use によると、conic-gradientは現在グローバルブラウザ使用率の93%以上をカバーしています。

適切なフォールバック戦略はシンプルです。

1. 最初にソリッドカラーの background-color を宣言します。グラデーションをサポートしていないブラウザはこの色を表示します。
2. 続けてグラデーションの background-image ルールを記述します。サポートしているブラウザはこれを上に重ねて表示します。
3. conic-gradientの場合は、ソリッドカラーとconicルールの間に linear-gradient のフォールバックも追加しましょう。

.element {
  background-color: #6a11cb;                        /* フォールバック */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* モダンブラウザ向け */
}

グラデーションのルールを書き終えたら、デプロイ前にCSSミニファイアーでスタイルシートを処理して、空白を除去しファイルサイズを削減することを検討してみてください。

CSSグラデーションをすぐに生成する

構文を覚えてしまえばグラデーションを手書きするのは速いですが、多数のカラーの組み合わせをリアルタイムでプレビューしたい場合は、オンラインのグラデーションジェネレーターが本当に役立ちます。ブラウザをリロードし続けなくても、カラーストップをドラッグしたり角度を調整したりして、最終的なCSSを数秒でコピーできます。

デザインファイルからカラーを変換してからグラデーションを組みたい場合は、HEX to RGBコンバーターやカラーピッカーをグラデーションビルダーを開く前に活用するのがおすすめです。

美しいCSSグラデーションをすぐに作成

無料・登録不要、ブラウザ上で直接動作します。linear、radial、conicグラデーションをライブプレビューで生成し、すぐ使えるCSSをコピーできます。

DevDeckのカラーツールを試す →

まとめ

CSSグラデーションは画像アセットを純粋なコードに置き換えます。解像度に依存せず、更新が簡単で、読み込みも高速です。方向性のある遷移には linear-gradient、スポットライトや発光効果には radial-gradient、円グラフや回転パターンが必要なときは conic-gradient を試してみてください。ソリッドカラーのフォールバックを必ず含め、テキストグラデーションのプレフィックス要件に注意し、ライブツールを使ってデザインの反復サイクルを効率化しましょう。これらの基本を押さえれば、プロジェクト全体で静的なグラデーション画像を置き換えるために必要なものがすべて揃います。