CSS Gradients: The Complete Guide (Linear, Radial, Conic)

CSS gradients are one of the most powerful yet underused design tools available. No images needed, scales infinitely, and supports animations. This guide covers every gradient type with practical examples and Tailwind CSS equivalents.

Linear Gradients

The most common gradient type — a smooth transition along a straight line.

/* Basic top to bottom */
background: linear-gradient(#2563eb, #7c3aed);

/* Custom angle */
background: linear-gradient(135deg, #2563eb, #7c3aed);

/* Direction keywords */
background: linear-gradient(to right, #2563eb, #7c3aed);
background: linear-gradient(to bottom right, #2563eb, #7c3aed);

/* Multiple stops */
background: linear-gradient(to right, #2563eb 0%, #7c3aed 50%, #ec4899 100%);

/* Hard stop (no blend) */
background: linear-gradient(to right, #2563eb 50%, #7c3aed 50%);

Tailwind CSS v3

<div class="bg-gradient-to-br from-blue-600 via-purple-600 to-pink-500">

Tailwind CSS v4

<div class="bg-linear-to-br from-blue-600 via-purple-600 to-pink-500">

Radial Gradients

Gradients that radiate from a center point — perfect for glows, spotlights, and depth effects.

/* Basic circular radial */
background: radial-gradient(circle, #2563eb, #0a0a0a);

/* Elliptical (default) */
background: radial-gradient(ellipse, #2563eb, transparent);

/* Positioned — glow effect */
background: radial-gradient(circle at top left, rgba(37,99,235,0.3), transparent 50%);

/* Size keywords */
background: radial-gradient(circle closest-side, #2563eb, transparent);
/* closest-side | farthest-side | closest-corner | farthest-corner */

Practical Glow Effect

.card {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37,99,235,0.15), transparent 60%),
    #111;
}

Conic Gradients

Gradients that rotate around a center point — great for pie charts, spinners, and color wheels.

/* Pie chart — 40% blue, 60% purple */
background: conic-gradient(#2563eb 144deg, #7c3aed 0deg);

/* Rainbow color wheel */
background: conic-gradient(
  red, orange, yellow, green, blue, indigo, violet, red
);

/* Checkerboard pattern */
background: conic-gradient(#888 90deg, #fff 90deg 180deg, #888 180deg 270deg, #fff 270deg)
  0 0 / 40px 40px;

/* Progress ring */
background: conic-gradient(#2563eb calc(var(--progress) * 1%), #e5e7eb 0%);

Layering Gradients

Multiple gradients can be stacked — the first one is on top:

background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), /* dark overlay */
  radial-gradient(ellipse at top, rgba(37,99,235,0.2), transparent 60%), /* glow */
  linear-gradient(135deg, #1e1b4b, #0a0a0a); /* base */

Animating Gradients

Gradient properties can't be animated directly, but background-position can:

.animated {
  background: linear-gradient(270deg, #2563eb, #7c3aed, #ec4899, #2563eb);
  background-size: 400% 400%;
  animation: shift 8s ease infinite;
}

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

Useful Patterns

Frosted glass

.glass {
  background: linear-gradient(
    rgba(255,255,255,0.1), rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
}

Subtle card border gradient

.card {
  border: 1px solid transparent;
  background:
    linear-gradient(#111, #111) padding-box,
    linear-gradient(135deg, #2563eb, #7c3aed) border-box;
}

Use the CSS Gradient Generator tool to visually build and preview any gradient, then copy the CSS or Tailwind output directly.