CSS Gradients: linear-gradient, radial-gradient & conic-gradient Explained

What is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file needed. Gradients are values of the background-image property (or the shorthand background) and scale infinitely without pixelation.

CSS has three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). All are supported in every modern browser.

linear-gradient()

Transitions colors along a straight line at a specified angle.

background: linear-gradient(angle, color-stop-1, color-stop-2, ...);

Angle values

• 0deg — bottom to top
• 90deg — left to right
• 135deg — top-left to bottom-right
• to right, to bottom right — keyword equivalents

Examples

/* Two-color diagonal */
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);

/* Three stops with explicit positions */
background: linear-gradient(90deg, #f8b500 0%, #ff6348 50%, #f093fb 100%);

/* Hard stop (no blend between colors) */
background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);

radial-gradient()

Radiates colors outward from a center point in a circular or elliptical shape.

background: radial-gradient(shape size at position, color-stop-1, color-stop-2);

• Shape: circle or ellipse (default)
• Size: closest-side, farthest-corner (default), etc.
• Position: same values as background-position (e.g., at center, at 30% 70%)

/* Circular spotlight effect */
background: radial-gradient(circle at center, #feca57, #ff6b6b 60%, transparent);

/* Ellipse from top-left */
background: radial-gradient(ellipse at 20% 20%, #a18cd1, #fbc2eb);

conic-gradient()

Rotates color stops around a center point — like a color wheel or pie chart. Added to CSS in 2021 and now supported in all modern browsers.

background: conic-gradient(from angle at position, color-stop-1, color-stop-2);

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

/* Pie chart segments */
background: conic-gradient(
  #ff6b6b 0% 30%,
  #4ecdc4 30% 60%,
  #f9ca24 60% 100%
);

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

Multiple Color Stops

Any gradient can have as many color stops as needed. Each stop specifies a color and an optional position:

background: linear-gradient(
  to right,
  #0652DD 0%,
  #1289A7 33%,
  #12CBC4 66%,
  #c0392b 100%
);

If positions are omitted, the browser distributes stops evenly. You can mix units: px, %, em, vw, etc.

Layering Gradients

Multiple gradients can be layered by comma-separating them in the background property — the first one renders on top:

background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  linear-gradient(135deg, #ff6b6b, #4ecdc4);

This technique is commonly used to darken an image overlay or add a subtle tint over a gradient.

Performance Notes

• Gradients are GPU-composited — they are cheaper than most CSS effects
• Avoid animating background directly; use opacity on a pseudo-element instead to keep animations on the compositor thread
• Very complex gradients with many stops can increase paint time on low-end devices

Browser Support

All three gradient types are supported in Chrome, Firefox, Safari, and Edge. conic-gradient() is the most recent addition (2021) and lacks support only in very old browsers. No vendor prefixes are needed for modern targets.