CSS グラデーションガイド：基本から高度なテクニックまで

CSSグラデーションはWeb開発者の最も強力なビジュアルツールの一つです。画像なしでスムーズな色の遷移を作成できます。この完全なCSSグラデーションガイドはすべてをカバーします。

CSSグラデーションジェネレーターでビジュアルに作成 →

リニアグラデーション

直線に沿って色を遷移させます。

Basic Syntax

/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);

/* With direction */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* With angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);

/* Multiple color stops */
background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);

/* Color stops with positions */
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);

Direction Keywords

background: linear-gradient(to top, ...);         /* 0deg */
background: linear-gradient(to right, ...);       /* 90deg */
background: linear-gradient(to bottom, ...);      /* 180deg - default */
background: linear-gradient(to left, ...);        /* 270deg */
background: linear-gradient(to top right, ...);   /* diagonal */
background: linear-gradient(to bottom left, ...); /* diagonal */

Hard Color Stops (Sharp Transitions)

/* Sharp 50/50 split */
background: linear-gradient(90deg, #3b82f6 50%, #ef4444 50%);

/* Three equal sections */
background: linear-gradient(90deg,
  #3b82f6 33.3%, #22c55e 33.3%,
  #22c55e 66.6%, #ef4444 66.6%
);

ラジアルグラデーション

中心点から外側に向かって放射状に色を遷移させます。

/* Default: ellipse at center */
background: radial-gradient(#3b82f6, #1e1b4b);

/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e1b4b);

/* Positioned center */
background: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
background: radial-gradient(circle at 25% 75%, #3b82f6, #1e1b4b);

/* Sized circle */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);

/* Size keywords */
background: radial-gradient(closest-side, #3b82f6, #1e1b4b);
background: radial-gradient(farthest-corner, #3b82f6, #1e1b4b);

/* Spotlight effect */
background: radial-gradient(circle 300px at 50% 30%,
  rgba(59, 130, 246, 0.3), transparent
);

コニックグラデーション

中心点の周りで色を遷移させます。

/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart */
background: conic-gradient(
  #3b82f6 0deg 120deg,   /* 33% */
  #22c55e 120deg 210deg, /* 25% */
  #f59e0b 210deg 300deg, /* 25% */
  #ef4444 300deg 360deg  /* 17% */
);

/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #3b82f6, #8b5cf6, #3b82f6);

/* Donut chart (combine with radial) */
background:
  radial-gradient(circle 60px, var(--bg-primary) 99%, transparent),
  conic-gradient(#3b82f6 0% 40%, #22c55e 40% 70%, #ef4444 70% 100%);
border-radius: 50%;

リピーティンググラデーション

ストライプやパターンの作成に最適です。

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #3b82f6, #3b82f6 10px,
  transparent 10px, transparent 20px
);

/* Horizontal stripes */
background: repeating-linear-gradient(
  0deg,
  #1e1b4b, #1e1b4b 2px,
  transparent 2px, transparent 20px
);

/* Repeating radial */
background: repeating-radial-gradient(
  circle, #3b82f6, #3b82f6 5px,
  transparent 5px, transparent 15px
);

/* Repeating conic (sunburst) */
background: repeating-conic-gradient(
  #3b82f6 0deg 10deg, transparent 10deg 20deg
);

複数・レイヤードグラデーション

複数のグラデーションを重ねることができます。

/* Spotlight overlay on gradient */
background:
  radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
  linear-gradient(135deg, #0f172a, #1e1b4b);

/* Cross pattern */
background:
  linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
  linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
background-size: 40px 40px;

グラデーションテキスト

background-clipでテキストにグラデーションを適用。

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

/* Animated gradient text (using @property) */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient-text {
  background: linear-gradient(var(--gradient-angle), #3b82f6, #ec4899, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rotate-gradient 3s linear infinite;
}

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

グラデーションボーダー

CSSは直接グラデーションボーダーをサポートしていません。

/* Method 1: border-image (no border-radius support) */
.gradient-border-1 {
  border: 3px solid;
  border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
}

/* Method 2: pseudo-element (supports border-radius) */
.gradient-border-2 {
  position: relative;
  border-radius: 12px;
  padding: 3px; /* border width */
  background: linear-gradient(135deg, #3b82f6, #ec4899);
}
.gradient-border-2::before {
  content: '';
  position: absolute;
  inset: 3px; /* same as padding */
  background: var(--bg-card); /* inner background */
  border-radius: 9px; /* outer radius minus border width */
}
.gradient-border-2 > * { position: relative; }

/* Method 3: outline + mask (modern browsers) */
.gradient-border-3 {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #3b82f6, #ec4899) border-box;
  border: 3px solid transparent;
  border-radius: 12px;
}

クリエイティブパターン

リピーティンググラデーションを組み合わせて複雑なパターンを作成。

/* Checkerboard */
background:
  conic-gradient(#1e293b 90deg, transparent 90deg 180deg,
    #1e293b 180deg 270deg, transparent 270deg) 0 0 / 40px 40px;

/* Dots */
background:
  radial-gradient(circle 3px, #3b82f6 99%, transparent) 0 0 / 20px 20px;

/* Carbon fiber */
background:
  radial-gradient(#333 15%, transparent 16%),
  radial-gradient(#333 15%, transparent 16%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
background-color: #222;

パフォーマンスとブラウザサポート

グラデーションはGPUでレンダリングされます。

• GPU-rendered: Gradients are composited by the GPU, making them faster than equivalent images.
• Zero HTTP requests: Unlike background images, gradients add no network overhead.
• Retina-ready: Gradients scale perfectly at any resolution without becoming pixelated.
• Browser support: Linear and radial gradients have 99%+ support. Conic gradients work in all modern browsers (Chrome, Firefox, Safari, Edge). Use @supports for progressive enhancement if targeting older browsers.
• Avoid: Extremely complex gradients with 20+ color stops on elements that reflow frequently.

よくある質問

CSSグラデーションはアニメーションできますか？

直接はできませんが、@propertyやbackground-positionで可能です。

linear-gradientとradial-gradientの違いは？

リニア = 直線。ラジアル = 中心から外側へ。

グラデーションボーダーの作り方は？

border-imageまたは疑似要素を使用。

パフォーマンスに影響しますか？

いいえ、GPUレンダリングで画像より高速。

カラーバンディングを防ぐには？

中間カラーストップを追加し、長い遷移を使用。

CSSグラデーションは多用途で高性能です。ツールで実験してみてください。

CSSグラデーションジェネレーターでデザイン →