ツールガイド

CSSグラデーションガイド：線形、放射状、円錐グラデーション

3分で読める

CSSグラデーションでは、単一の画像リクエストなしで、ブラウザで2つ以上のカラー間の平滑な遷移を作成できます。CSS3で導入され、現在はユニバーサルサポートされており、グラデーションは単純な2ストップフェードから、テクスチャ、幾何学的パターン、および次元の効果を生成できる洗練された視覚要素に進化しました。このガイドは、CSSグラデーションのあらゆるタイプを歩き、構文を詳細に説明し、スタイルシートに直接落とすことができる実践的な16進コード例を示します。

CSSグラデーションとは何か

CSSグラデーションは、特別なタイプの<image>値です。プログラム的にカラー遷移を生成し、ブラウザが定義されたカラーストップ間の中間カラーを計算することを意味します。グラデーションはカラーではなく画像であるため、background-imageまたは短いbackgroundプロパティに適用します。background-colorではなく。

CSSの3つのグラデーションタイプは以下の通りです。

  • linear-gradient() — カラーは直線に沿って遷移
  • radial-gradient() — カラーは中心点から外側に放射
  • conic-gradient() — カラーは中心点周辺を回転

各タイプは、repeating-*バリアント(repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient())も持ち、要素全体のグラデーションパターンをタイルします。

線形グラデーション

線形グラデーションは、指定された角度で直線に沿ったカラー遷移を描画します。

基本構文

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

directionパラメータはオプションです。なしでは、グラデーションは上から下に流れます(to bottomまたは180degに相当)。

/* 上から下へ(デフォルト) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* 左から右へ */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* 対角線 */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

角度構文

角度は要素の上から時計回りで度で測定されます。0degは上向き、90degは右向き、180degは下向きです。

/* 左下から右上への45度対角線 */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* 左上から右下への135度対角線 */
background: linear-gradient(135deg, #667EEA, #764BA2);

一般的な使用例は、ヒーローセクションの背景です。たとえば、#667EEAから#764BA2へのグラデーントを135度で、白いテキストの後ろに見える涼しいパープル対角線を生成します。

方向キーワード

角度の代わりに、方向キーワードを使用できます。

キーワード 等価な角度
to top 0deg
to top right 45deg
to right 90deg
to bottom right 135deg
to bottom 180deg
to bottom left 225deg
to left 270deg
to top left 315deg

キーワードはコードレビューで読みやすく、自らドキュメント化しています。対角線に該当しない正確な角度のため、明示的な度数を予約します。

複数のカラーストップ

カラーストップは、グラデーション線に沿って各カラーが開始および終了する場所を定義します。任意のCSS長またはパーセンテージを位置として使用できます。

/* 3停止グラデーション */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* 位置付けされたストップ */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* ハードカラーストップ(遷移なし) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

ハードカラーストップテクニック — ブレンディングなしで同じ位置に2つのストップを設定します — カラー間の鋭いエッジを作成します。これは旗のようなデザイン、進度インジケータ、または分割画面の背景に有用です。

カラーストップとヒント

CSSは2つのカラーストップ間の中点ヒントをサポートしており、補間が最速またはゆっくり行く場所を制御します。

/* グラデーションはブルー範囲内で長く留まる */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

30%ヒントはブラウザに、ブルー#3B82F6と赤#EF4444間の遷移の中点が30%マークで発生し、ブルーを留まらせて赤がすぐに表示されるべきであることを通知します。

放射状グラデーション

放射状グラデーションは、中心点から外側に発散し、円形または楕円形のパターンを作成します。

基本構文

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

すべてのパラメータはオプションです。デフォルトは、要素の中央に中心を置き、最も遠いコーナーに到達するように調整された楕円形グラデーションを生成します。

/* シンプルセンター放射状 */
background: radial-gradient(#FFF176, #F57F17);

/* 明示的な円 */
background: radial-gradient(circle, #A8E063, #2D6A4F);

形

放射状グラデーションはcircle(均一半径)またはellipse(デフォルト、要素の寸法に適応)です。

/* 円：すべての方向で同じ半径 */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* 楕円：要素の寸法に適応 */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

サイズキーワード

サイズはグラデーションが拡張する距離を制御します。

キーワード 説明
closest-side グラデーションは最も近い側で終了
closest-corner グラデーションは最も近いコーナーで終了
farthest-side グラデーションは最も遠い側で終了
farthest-corner グラデーションは最も遠いコーナーで終了(デフォルト) 
/* 左上にある小さなスポットライト */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

位置

atキーワードは、任意の有効なCSS位置値を使用してグラデーションの中心点を設定します。

/* ライティング効果のためのオフセンターグラデーション */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* センター底スポットライト */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

グラデーションをオフセンター配置することで、光源の出現を作成しており、glassmorphismおよび深さ効果の一般的なテクニックです。

円錐グラデーション

円錐グラデーションは、中心点周辺のカラーを回転させます。円グラフの描画方法に似ています。CSSに他のタイプより後に追加されましたが、現在はフルブラウザサポートがあります。

基本構文

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* 基本的な円錐グラデーション */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* 90度から開始 */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

円グラフと円錐グラデーション

円錐グラデーションは純粋CSSの円グラフに理想的です。

/* 円グラフ：40%赤、35%ブルー、25%グリーン */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

数学は単純です。パーセンテージに3.6を乗算して度を取得します(40% × 3.6 = 144deg)。

カラーホイールと円錐グラデーション

すべての色合いを通して循環する完全な円錐グラデーションは、カラーホイールを再作成します。

background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);
border-radius: 50%;

チェッカーボードおよびストライプパターン

repeating-conic-gradient()バリアントは幾何学的パターンを作成します。

/* チェッカーボード */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

グラデーションの繰り返し

各グラデーションタイプには、定義されたパターンを連続的にタイルするリピーティングバリアントがあります。

/* 対角線ストライプ */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* 同心円 */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

グラデーションの繰り返しはテクスチャ効果に効率的です。背景上の透かし風の対角線、または照準照準の美学のための同心円。

グラデーション内の透明性

グラデーション内でtransparentまたはrgba()値を使用すると、フェードイン効果とフェードアウト効果が作成されます。

/* 底でフェードアウト(以下のコンテンツは見ることができます) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* ビネットオーバーレイ */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

transparentはCSS内ではrgba(0,0,0,0) —完全に透明なブラックです — これはカラー値から遷移する場合、予期しない灰色バンドを生成する可能性があります。これを避けるため、カラーの完全に透明なバージョンを使用します。

/* 正確：ブルーの透明バージョン */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* 不正確：灰色バンディングを導入 */
background: linear-gradient(to right, #3B82F6, transparent);

複数のグラデーションの層化

backgroundプロパティは複数のコンマ分離値を受け入れます。各グラデーションは前のグラデーションの上に積層されます。

/* 固体カラーの対角線オーバーレイ */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* グラデーションを使用したノイズテクスチャシミュレーション */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

階層化されたグラデーションは、複数の背景画像が必要とするHTTPリクエストを削減し、カラーと寸法に対する完全なCSS制御を提供します。

CSSグラデーションパフォーマンス

グラデーントはGPUによって計算され、一般的に効率的です。ただし、パフォーマンスに敏感な文脈では、いくつかのパターンを回避する価値があります。

  • アニメーション化されたグラデーション ：CSSは2つの異なるbackground-image値間で遷移できません。グラデーションをアニメーション化するには、CSSカスタムプロパティ(変数)を変更するか、JavaScriptを使用する必要があります。回避策は、より大きなグラデーションでbackground-positionをアニメーション化することです。
  • 複雑な繰り返しパターン ：非常に小さいリピートサイズ(2pxの下)の大きな要素は、ブラウザに数千ピクセルのグラデーントを計算するように強制し、ペイントパフォーマンスの問題を引き起こす可能性があります。
  • アニメーション中のグラデーション背景でfilter: blur()を回避 — これはGPU集約的であり、ジャンキネスを引き起こします。

グラデーションアニメーション用、@propertyを持つCSSカスタムプロパティを使用すると、ハードウェア加速の平滑な遷移が提供されます。

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

グラデーションジェネレータを使用する

グラデーションを手で書くことは構文を理解するために価値がありますが、グラデーションジェネレータはプロセスを大幅に高速化します。あなたはできます：

  • ビジュアルカラーピッカーを使用するか、16進コードを直接入力してカラーを開始および終了を選択する
  • スライダーまたは数値入力を使用してグラデーション角度を設定
  • 正確な位置に複数のカラーストップを追加
  • グラデーションを異なる要素サイズ全体でリアルタイムでプレビュー
  • 完成したCSSを1クリックコピーします

たとえば、日没のグラデーションを構築するには、開始色として#FF6B6B、50%で#FFC300、終了時に#FF3C00を入力してから、角度を135度に設定します。ジェネレータは、スタイルシートに直接貼り付けられます。

カラーコンバータとグラデーションジェネレータをペアリングして、16進の代わりにHSLまたはOKLCH値で作業する必要があります。OKLCHなどのモダンカラースペースは、明度軸がすべての色合い全体で本当に均一であるため、知覚的に均一なグラデーションを生成します。

実践的なグラデーションレシピ

ヒーローセクション背景

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

深いパープルブルー対角線、SaaSランディングページに適しています。

カードホバー効果

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

#F5F7FAから#C3CFE2への微妙なライトブルーグレーグラデーション。

ネオングロウボタン

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

#11998Eから#38EF7Dへの活発なグリーン。

ダークモード表面

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

ダークモードカードサーフェス用の微妙なダークパープルブルー。

メッシュグラデーント(レイヤーで近似)

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

主要なポイント

  • CSSは3つのグラデーションタイプを提供しています。linear-gradient()は直線遷移用、radial-gradient()は円形または楕円形パターン用、conic-gradient()は中心点周囲の円グラフスタイルの回転用。
  • 各タイプはrepeating-*バリアントを持ち、グラデーションパターンをタイルするため、テクスチャ効果、ストライプ、幾何学的パターンに有用。
  • パーセンテージまたはピクセル位置を持つ複数のカラーストップは、遷移が発生する場所に対する正確な制御を与えます。2つのストップを同じ位置で使用すると、ブレンディングなしにハードエッジが作成されます。
  • グレーバンディングを回避するために、カラーを透明にフェードするときに、むしろ素のtransparentキーワードではなく、ゼロアルファを持つrgba()を使用してください。
  • 複数のグラデーションは単一のbackground宣言で階層化でき、各グラデーションが前のグラデーションの上に配置されます。
  • グラデーションジェネレータでは、複雑なグラデーントを視覚的に構築し、リアルタイムプレビューと1クリックCSSエクスポートを使用できます。

関連カラー

black

#000000

blue

#0000FF

green

#008000

purple

#800080

white

#FFFFFF

関連ブランド

Stripe

Payments infrastructure for the internet

1色

Linear

Linear is a better way to build software

4色

Circle

3色

Corner

2色

Dimensional

3色

Hex

8色

関連ツール

グラデーションジェネレーター

ライブプレビューとコピー可能なコードで、美しいCSSリニア・ラジアルグラデーションを作成します。

ツールを開く