CSS Gradients Deep Dive

TL;DR

• CSS has three gradient types: linear-gradient, radial-gradient, and conic-gradient — each with distinct use cases
• Gradient banding is the #1 visual issue; fix it with wider color stops or slight noise overlays
• Use gradients for backgrounds, text effects, borders, and even loading animations
• The color-mix() function and oklch color space produce smoother, more perceptually uniform gradients

Gradient Types Explained

Linear Gradients

The workhorse. Transitions color along a straight line. The angle controls direction (0deg = bottom to top, 90deg = left to right).

/* Basic linear gradient */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Multi-stop gradient with explicit positions */
.banner {
  background: linear-gradient(
    90deg,
    hsl(217, 91%, 50%) 0%,
    hsl(260, 80%, 55%) 50%,
    hsl(340, 75%, 55%) 100%
  );
}

Radial Gradients

Color radiates from a center point outward. Perfect for spotlight effects, glows, or circular UI elements.

/* Spotlight effect */
.card {
  background: radial-gradient(
    ellipse at 30% 20%,
    hsl(217, 80%, 65%) 0%,
    hsl(217, 60%, 15%) 70%
  );
}

/* Circular glow behind an avatar */
.avatar-glow {
  background: radial-gradient(
    circle at center,
    hsla(217, 91%, 50%, 0.3) 0%,
    transparent 70%
  );
}

Conic Gradients

Color sweeps around a center point like a pie chart. Useful for progress indicators and decorative elements.

/* Pie-chart style progress */
.progress-ring {
  background: conic-gradient(
    hsl(217, 91%, 50%) 0deg,
    hsl(217, 91%, 50%) 270deg,  /* 75% complete */
    hsl(217, 10%, 90%) 270deg,
    hsl(217, 10%, 90%) 360deg
  );
  border-radius: 50%;
}

Advanced Techniques

Gradient Text

One of the most popular effects — gradient-filled text:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

💡 Try the Gradient Text Generator to create and preview gradient text effects instantly.

Gradient Borders

CSS doesn't support border-image with border-radius. The workaround uses a background trick:

.gradient-border {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 2rem;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px; /* parent radius + border width */
  background: linear-gradient(135deg, #667eea, #764ba2);
  z-index: -1;
}

Animated Gradients

You can't animate gradient colors directly, but you can animate background-position or background-size:

.animated-gradient {
  background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 300% 300%;
  animation: gradient-shift 6s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Fixing Gradient Banding

Banding — visible steps between colors — is the most common gradient problem. It happens when the color difference is large and the gradient is wide.

• Add intermediate color stops — break a two-stop gradient into four or five stops with manually chosen midpoints
• Use oklch color space — perceptually uniform, so transitions look smoother to the human eye
• Add a subtle noise overlay — a 1-2% opacity noise texture breaks up banding at the pixel level

/* Smoother gradient using oklch */
.smooth {
  background: linear-gradient(
    135deg in oklch,
    oklch(0.55 0.25 265),
    oklch(0.55 0.25 330)
  );
}

Mesh Gradients and Modern Approaches

Mesh gradients layer multiple radial gradients to create organic, fluid backgrounds:

.mesh-bg {
  background:
    radial-gradient(ellipse at 10% 20%, hsla(280, 80%, 60%, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, hsla(217, 90%, 55%, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, hsla(340, 80%, 55%, 0.4) 0%, transparent 50%),
    hsl(240, 20%, 8%);
}

Best Practices

• Do use the in oklch interpolation for smoother color transitions
• Do keep gradients subtle in functional UI — save dramatic gradients for hero sections
• Do test gradients on different screens — cheap monitors show banding more
• Don't use more than 3-4 color stops unless going for a rainbow effect
• Don't apply gradient text to long paragraphs — it hurts readability
• Don't forget to set a fallback background-color before the gradient

Common Mistakes

• Forgetting background-clip: text — the gradient shows behind the text instead of filling it
• Using deg backwards — 0deg goes bottom-to-top, not left-to-right. 90deg is left-to-right
• Harsh color stops — going from blue directly to yellow creates a muddy green band in the middle. Add an intermediate stop
• Performance with animations — avoid animating the gradient itself. Animate background-position or use transform on a pseudo-element

Tools to Explore

• Gradient Generator — build, preview, and copy CSS gradients visually
• Gradient Text — create stunning gradient text effects with live preview

TL;DR

• CSS has three gradient types: linear-gradient, radial-gradient, and conic-gradient — each with a repeating variant
• Color stops with explicit positions give you precise control over transitions
• Gradients are images, not colors — use them on background-image, not background-color
• You can layer multiple gradients and combine them with blend modes for complex effects

Understanding CSS Gradients

Gradients are one of CSS's most powerful visual tools, yet most developers only scratch the surface with a simple two-color linear-gradient. Under the hood, gradients are generated images — the browser creates them on the fly at whatever resolution is needed. This means they're resolution-independent, infinitely scalable, and cost zero network requests.

Linear Gradients

Linear gradients transition colors along a straight line. The direction defaults to top-to-bottom but can be set with angles or keywords.

/* Basic: top to bottom */
background: linear-gradient(#667eea, #764ba2);

/* With direction */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #667eea, #764ba2);

/* Multiple color stops */
background: linear-gradient(
  90deg,
  #667eea 0%,
  #764ba2 50%,
  #f093fb 100%
);

/* Hard stops (no transition = stripes) */
background: linear-gradient(
  #667eea 0%, #667eea 33%,
  #764ba2 33%, #764ba2 66%,
  #f093fb 66%, #f093fb 100%
);

The angle defines the gradient line direction: 0deg goes bottom-to-top, 90deg goes left-to-right, 180deg (the default) goes top-to-bottom.

Radial Gradients

Radial gradients emanate from a center point. You control the shape (circle or ellipse), size, and position.

/* Basic circle */
background: radial-gradient(circle, #667eea, #764ba2);

/* Positioned off-center */
background: radial-gradient(circle at 20% 80%, #667eea, transparent);

/* Sized explicitly */
background: radial-gradient(circle 200px at center, #667eea, #764ba2);

/* Ellipse with size keywords */
background: radial-gradient(
  ellipse closest-side at 30% 50%,
  #667eea, #764ba2, transparent
);

Conic Gradients

Conic gradients rotate colors around a center point, like a color wheel. Perfect for pie charts, color wheels, and decorative patterns.

/* Color wheel */
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%)
);

/* Pie chart: 40% blue, 35% purple, 25% pink */
background: conic-gradient(
  #667eea 0% 40%,
  #764ba2 40% 75%,
  #f093fb 75% 100%
);
border-radius: 50%;

Repeating Gradients

Every gradient type has a repeating variant that tiles the pattern. Incredibly useful for backgrounds and decorative elements.

/* Striped background */
background: repeating-linear-gradient(
  45deg,
  #667eea, #667eea 10px,
  #764ba2 10px, #764ba2 20px
);

/* Concentric circles */
background: repeating-radial-gradient(
  circle,
  #667eea, #667eea 10px,
  transparent 10px, transparent 20px
);

/* Checkerboard */
background: conic-gradient(#eee 25%, #fff 25% 50%, #eee 50% 75%, #fff 75%);
background-size: 40px 40px;

Gradient Text

One of the most popular gradient techniques is applying a gradient to text using background-clip.

.gradient-text {
  background: linear-gradient(135deg, #667eea, #f093fb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}

/* Animated gradient text */
.animated-gradient-text {
  background: linear-gradient(90deg, #667eea, #f093fb, #667eea);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-scroll 3s linear infinite;
}

@keyframes gradient-scroll {
  to { background-position: 200% center; }
}

Generate gradient text CSS instantly with the stellae.design gradient text tool at /en/gradient-text — pick your colors and copy the code.

Layering Gradients

Since gradients are background images, you can stack multiple gradients using CSS's multi-background syntax.

/* Mesh-like gradient */
.mesh-bg {
  background:
    radial-gradient(circle at 20% 80%, rgba(102,126,234,0.6), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(240,147,251,0.6), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(118,75,162,0.4), transparent 60%),
    linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}

Best Practices

• ✅ Use background-image (or shorthand background), not background-color for gradients
• ✅ Provide a solid fallback color before the gradient for older browsers
• ✅ Consider prefers-reduced-motion when animating gradients
• ❌ Don't animate the gradient itself — animate background-position or background-size instead
• ❌ Don't use too many color stops — subtle 2-3 color gradients usually look more professional

Common Mistakes

• Gray band in the middle: Transitioning between two saturated colors (blue to yellow) often produces muddy gray. Fix: add a mid-point color, or use oklch() which handles this better.
• Gradient text invisible in dark mode: If your gradient uses dark colors and the background switches to dark, the text disappears. Always test both themes.
• Banding artifacts: Large, subtle gradients can show visible banding. Adding noise or increasing the color difference helps.
• Using degrees wrong: 0deg = bottom-to-top, not left-to-right. 90deg = left-to-right.

Explore Further

Build and preview gradients visually with the stellae.design gradient generator at /en/gradient. For text effects, try the gradient text tool at /en/gradient-text.