グラデーションテクニック

問題

AIエージェントは、背景、テキストフィル、装飾要素にグラデーションを使えばはるかに洗練された見た目になるのに、フラットな単色に頼りがちです。AIがグラデーションを使う場合でも、不調和な色の組み合わせを選んだり、滑らかなトランジションのための知覚的色空間の使用を見落としたり、レイヤードグラデーション、ハードストップパターン、グラデーションテキストなどの高度なテクニックを見逃したりします。

解決方法

CSSには3つのグラデーション関数 — linear-gradient()、radial-gradient()、conic-gradient() — があり、それぞれにリピーティングバリアントがあります。これらはレイヤー化したり、ハードストップでパターンを作ったり、テキストに適用したり、oklch のような知覚的色空間で補間してスムーズで鮮やかな結果を得たりできます。

コード例

線形グラデーションの基本

/* Top-to-bottom (default) */
.gradient-basic {
  background: linear-gradient(#3b82f6, #8b5cf6);
}

/* Angled */
.gradient-angled {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* Multi-stop with explicit positions */
.gradient-multi {
  background: linear-gradient(
    to right,
    #3b82f6 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
}

oklch によるスムーズなグラデーション

標準的なRGB補間では中間色が濁ることがあります。oklch を使うとよりスムーズで鮮やかなトランジションになります。

/* Muddy middle in sRGB */
.gradient-srgb {
  background: linear-gradient(in srgb, #3b82f6, #ef4444);
}

/* Vibrant, smooth transition in oklch */
.gradient-oklch {
  background: linear-gradient(in oklch, #3b82f6, #ef4444);
}

/* oklch with explicit hue interpolation */
.gradient-oklch-longer {
  background: linear-gradient(in oklch longer hue, #3b82f6, #ef4444);
}

放射状グラデーション

/* Centered circle */
.radial-circle {
  background: radial-gradient(circle, #3b82f6, #1e3a5f);
}

/* Ellipse from top-left */
.radial-positioned {
  background: radial-gradient(ellipse at 20% 30%, #8b5cf6, #1e1b4b);
}

/* Spotlight effect */
.radial-spotlight {
  background: radial-gradient(
    circle at 50% 0%,
    hsl(220deg 80% 60%) 0%,
    hsl(220deg 80% 10%) 70%
  );
}

円錐グラデーション

/* Color wheel */
.conic-wheel {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  border-radius: 50%;
}

/* Pie chart segment */
.conic-pie {
  background: conic-gradient(
    #3b82f6 0deg 120deg,
    #8b5cf6 120deg 210deg,
    #e2e8f0 210deg 360deg
  );
  border-radius: 50%;
}

ハードストップグラデーションによるパターン

ハードストップは、2つのカラーストップが同じ位置を共有する場合に発生し、スムーズなブレンドではなく瞬時のトランジションを作成します。

/* Striped background */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #3b82f6 0px,
    #3b82f6 10px,
    #2563eb 10px,
    #2563eb 20px
  );
}

/* Checkerboard with conic-gradient */
.checkerboard {
  background:
    conic-gradient(
      #e2e8f0 25%,
      #fff 25% 50%,
      #e2e8f0 50% 75%,
      #fff 75%
    );
  background-size: 40px 40px;
}

/* Progress bar with hard stop */
.progress-bar {
  background: linear-gradient(
    to right,
    #3b82f6 0%,
    #3b82f6 65%,
    #e2e8f0 65%,
    #e2e8f0 100%
  );
}

レイヤードグラデーションによる複雑な背景

複数のグラデーションは、カンマ区切りの background 値で重ねることができます。後の値は前の値の背後にレンダリングされるため、下のレイヤーが透けて見えるように透明度を使います。

/* Mesh-like layered gradient */
.layered-gradient {
  background:
    radial-gradient(
      circle at 20% 80%,
      hsl(220deg 80% 60% / 0.6),
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      hsl(330deg 80% 60% / 0.6),
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      hsl(270deg 80% 60% / 0.4),
      transparent 60%
    ),
    hsl(220deg 40% 10%);
}

/* Noise-like texture using layered gradients */
.texture-gradient {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      hsl(0deg 0% 100% / 0.03) 2px,
      hsl(0deg 0% 100% / 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      hsl(0deg 0% 100% / 0.03) 2px,
      hsl(0deg 0% 100% / 0.03) 4px
    ),
    linear-gradient(135deg, #1a1a2e, #16213e);
}

グラデーションテキスト

.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback for non-webkit */
}

<h1 class="gradient-text">Gradient Heading</h1>

background-clip によるグラデーションボーダー

.gradient-border {
  border: 3px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
}

ライブプレビュー

詳細解説

• CSSのみのパターンライブラリ — グラデーションのみで構築されたCSS装飾パターンのコレクション：チェッカーボード、ストライプ、ドット、ウェーブなど

AIがよくやるミス

• どこでもフラットな単色 — 微妙なグラデーション（linear-gradient(#3b82f6, #2563eb) など）で奥行きと洗練さを加えられるのに、background: #3b82f6 を使う。
• 不調和な色の組み合わせ — sRGB補間で濁った中間色を生む無関係な2色を選ぶ。in oklch を使えば解決します。
• パターンに repeating-gradient を無視する — 擬似要素でストライプやパターン効果を手動で作成するが、repeating-linear-gradient() でネイティブに処理できる。
• グラデーションテキストで -webkit- プレフィックスを忘れる — background-clip: text は多くのブラウザで -webkit-background-clip: text が依然として必要。
• レイヤードグラデーションを使わず単一グラデーションだけ使う — 単一の linear-gradient で十分な場合もありますが、放射状グラデーションをベースの上にレイヤーするとメッシュグラデーションのような複雑さが生まれます。
• リピーティングパターンに background-size を設定しない — conic-gradient パターンは正しくタイリングするために明示的な background-size が必要。

使い分け

• 微妙な奥行き — カード、ボタン、ヘッダーにほぼ同じ2色のグラデーションで、派手さなく立体感を追加する
• ヒーローセクションと背景 — レイヤードグラデーションで画像のダウンロードなしに視覚的にリッチな背景を作る
• テキストハイライト — 見出しやCTAに注目を集めるグラデーションテキスト
• 装飾パターン — ストライプ、ドット、幾何学的背景のためのハードストップのリピーティンググラデーション
• データビジュアライゼーション — JavaScriptなしで簡単な円グラフ/ドーナツチャートのための円錐グラデーション
• ボーダー — 角丸が必要な要素に background-clip によるグラデーションボーダー

Tailwind CSS

Tailwindはグラデーションの方向に bg-gradient-to-*、カラーストップに from-*、via-*、to-* のユーティリティを提供しています。これらは一般的な線形グラデーションパターンを簡潔にカバーします。

線形グラデーション

グラデーションカード

グラデーションテキスト

参考リンク

• Using CSS Gradients — MDN Web Docs
• A Complete Guide to CSS Gradients — CSS-Tricks
• Make Beautiful Gradients in CSS — Josh W. Comeau
• A Deep CSS Dive Into Radial and Conic Gradients — Smashing Magazine