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

Why CSS Gradients Beat Images

Before CSS gradients, designers used image slices for background blends. CSS gradients replaced all of that with zero HTTP requests, infinite scalability, and instant rendering. They respond to container size changes, support animation, and can be layered with multiple gradient calls on the same element.

Today there are three CSS gradient functions, each producing a different shape:

• linear-gradient() — straight-line transition
• radial-gradient() — circular or elliptical transition from a center point
• conic-gradient() — angular sweep around a point (like a pie chart)

linear-gradient() — Full Syntax

The most widely used gradient. Colors transition along a straight line defined by an angle or direction keyword.

/* Basic syntax */
background: linear-gradient(angle, color-stop-1, color-stop-2, ...);

/* Examples */
background: linear-gradient(135deg, #a78bfa, #f472b6);
background: linear-gradient(to right, #38bdf8, #34d399);
background: linear-gradient(90deg, #f97316 0%, #ef4444 50%, #ec4899 100%);

Angle reference

Value	Direction	Common use
0deg	Bottom → Top	Vertical overlays
90deg	Left → Right	Horizontal banners
135deg	Top-left → Bottom-right	Cards, heroes
180deg	Top → Bottom	Section backgrounds
to right	Left → Right	Same as 90deg
to bottom right	Diagonal	Same as ~135deg

Color Stops: Precise Color Positioning

Every color in a gradient is a color stop — a color value with an optional position. Without positions, stops are evenly distributed. With positions, you control exactly where each color starts.

/* Even distribution (browser calculates positions) */
background: linear-gradient(90deg, red, yellow, green);

/* Manual positions */
background: linear-gradient(90deg,
  #a78bfa 0%,    /* violet from the very start */
  #a78bfa 40%,   /* violet holds until 40% */
  #f472b6 60%,   /* sharp transition starts at 60% */
  #f472b6 100%   /* pink to end */
);

/* Hard color stop (no smooth transition) */
background: linear-gradient(90deg, #a78bfa 50%, #f472b6 50%);

The last example creates a hard stop — the same position value for adjacent stops eliminates the blend, producing a crisp edge. This technique is used for CSS stripes and duotone splits.

radial-gradient() — Circles and Ellipses

Radial gradients emit from a center point outward. You can control the shape (circle or ellipse), the center position, and the extent.

/* Basic */
background: radial-gradient(circle, #a78bfa, #0f0f14);

/* Position control */
background: radial-gradient(circle at top left, #a78bfa, #0f0f14);
background: radial-gradient(circle at 30% 70%, #38bdf8, #0f0f14);

/* Size keywords */
background: radial-gradient(circle closest-side at 50% 50%, #a78bfa, #0f0f14);
background: radial-gradient(circle farthest-corner at 30% 40%, #f472b6, #0f0f14);

/* Ellipse (default) */
background: radial-gradient(ellipse at center, #a78bfa 0%, #0f0f14 70%);

Size keywords: closest-side / closest-corner — gradient ends at the nearest edge/corner. farthest-side / farthest-corner — extends to the farthest edge/corner.

conic-gradient() — Sweeps and Pie Charts

Conic gradients rotate colors around a center point like a spinning color wheel. The angle sweeps from a starting angle, defaulting to from 0deg (pointing up).

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

/* Pie chart (3 segments) */
background: conic-gradient(
  #a78bfa 0deg 120deg,
  #f472b6 120deg 240deg,
  #38bdf8 240deg 360deg
);

/* Starting angle offset */
background: conic-gradient(from 45deg, #a78bfa, #f472b6, #38bdf8, #a78bfa);

/* Position control */
background: conic-gradient(from 0deg at 30% 50%, #a78bfa, #f472b6, #a78bfa);

Stacking Multiple Gradients

The background property accepts multiple comma-separated values. Earlier values sit on top of later ones. This lets you layer gradients for complex effects:

/* Overlay a radial glow on a linear base */
background:
  radial-gradient(circle at 70% 30%, rgba(167,139,250,.4), transparent 60%),
  linear-gradient(135deg, #0f0f14 0%, #1e1b4b 100%);

/* Double diagonal stripes */
background:
  linear-gradient(45deg, transparent 45%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.05) 55%, transparent 55%),
  linear-gradient(135deg, #a78bfa, #f472b6);

Animating CSS Gradients

You cannot directly animate linear-gradient() values with CSS transitions — gradients are not animatable properties. The workaround is to animate background-position on an oversized gradient:

/* Animated gradient trick */
.animated-bg {
  background: linear-gradient(270deg, #a78bfa, #f472b6, #38bdf8, #a78bfa);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
}

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

Alternatively, use CSS custom properties with @property (Houdini) to animate actual color values in Chrome 85+:

@property --color-1 {
  syntax: '';
  initial-value: #a78bfa;
  inherits: false;
}
.houdini-grad {
  background: linear-gradient(135deg, var(--color-1), #f472b6);
  transition: --color-1 1s ease;
}
.houdini-grad:hover { --color-1: #38bdf8; }

Browser Support in 2026

Function	Global support	Notes
linear-gradient()	>99%	Full support, no prefix needed
radial-gradient()	>99%	Full support, no prefix needed
conic-gradient()	~97%	All modern browsers; IE/old Edge unsupported
@property (Houdini)	~88%	Chrome/Edge/Opera yes; Firefox partial
repeating-linear-gradient()	>99%	Same support as linear-gradient()

7 Rules for Beautiful Gradients

1. Stay within 60° of hue rotation. Violet (#a78bfa) to pink (#f472b6) = 45° rotation — feels harmonious. Jumping 180° (e.g. green to red) creates muddy browns in the middle.
2. Never use pure black (#000000). Use a near-black with slight hue tint, like #0f0a1e or #0d1117. Pure black in a gradient looks flat.
3. 135deg is the most dynamic angle. Straight 90° or 180° reads as flat. 45° / 135° diagonals create movement and energy.
4. Control the midpoint. By default, CSS blends colors at the exact midpoint. Add a midpoint stop to push the transition earlier or later: linear-gradient(135deg, #a78bfa, 30%, #f472b6).
5. Desaturate slightly toward the center. For a 3-stop gradient, the middle stop should have 10-15% less saturation to avoid the "neon" effect.
6. Use transparency for overlays. rgba(0,0,0,0.5) to transparent creates a perfect text-legibility overlay over photos without introducing color contamination.
7. Test on white and dark backgrounds. Semi-transparent gradients look completely different depending on what's behind them.

Real-World Use Cases

Hero sections: Full-bleed linear-gradient(135deg, #1e1b4b, #4c1d95) over a dark background gives depth without a large image.

Buttons: linear-gradient(135deg, #a78bfa, #f472b6) on a button creates a vivid CTA that catches the eye. Use the same gradient for :focus ring with outline.

Text fills: Apply the gradient to text with background-clip: text and -webkit-text-fill-color: transparent for gradient-colored headings.

Loaders: Animate conic-gradient(from var(--angle), #a78bfa, transparent) with a rotating --angle custom property for a smooth CSS spinner.

Cards: Layer a subtle radial-gradient(at top right, rgba(167,139,250,.12), transparent) over a solid dark card background for a soft glow effect.