CSS Gradients: Linear, Radial, and Conic — The Complete Guide

Why CSS Gradients?

CSS gradients let you create smooth color transitions without any image files — reducing HTTP requests, scaling infinitely, and animating smoothly via CSS transitions. They are supported in all modern browsers and are a fundamental tool for modern UI design.

Linear Gradients

A linear gradient transitions colors along a straight line:

/* Basic — top to bottom */
background: linear-gradient(#ff4d8b, #b8a4ed);

/* With direction */
background: linear-gradient(to right, #ff4d8b, #b8a4ed);
background: linear-gradient(45deg, #ff4d8b, #b8a4ed);

/* Multiple stops */
background: linear-gradient(to right, #ff4d8b 0%, #ffb084 50%, #b8a4ed 100%);

/* Hard stop (no blend) */
background: linear-gradient(to right, #ff4d8b 50%, #b8a4ed 50%);

Direction Values

to top, to bottom, to left, to right
to top right, to bottom left, etc.
Angle: 0deg = bottom to top, 90deg = left to right, 180deg = top to bottom

Radial Gradients

Radial gradients radiate outward from a center point:

/* Circle from center */
background: radial-gradient(circle, #ff4d8b, #b8a4ed);

/* Ellipse (default) */
background: radial-gradient(ellipse, #ff4d8b, #b8a4ed);

/* Positioned */
background: radial-gradient(circle at top left, #ff4d8b, #b8a4ed);
background: radial-gradient(circle at 30% 70%, #ff4d8b, #b8a4ed);

/* Sized */
background: radial-gradient(circle farthest-corner at 50% 50%, #ff4d8b, #b8a4ed);

Size Keywords

closest-side — gradient ends at nearest side
farthest-side — gradient ends at farthest side
closest-corner — gradient ends at nearest corner
farthest-corner — gradient ends at farthest corner (default)

Conic Gradients

Conic gradients rotate around a center point — great for pie charts and color wheels:

/* Basic */
background: conic-gradient(#ff4d8b, #b8a4ed, #ff4d8b);

/* From angle */
background: conic-gradient(from 45deg, #ff4d8b, #b8a4ed);

/* Pie chart */
background: conic-gradient(
  #ff4d8b 0deg 120deg,
  #ffb084 120deg 240deg,
  #b8a4ed 240deg 360deg
);

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

Repeating Gradients

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

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

Layered Gradients

CSS allows multiple background layers — use commas to stack gradients:

background:
  radial-gradient(circle at 20% 80%, rgba(255,77,139,0.4) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%, rgba(184,164,237,0.4) 0%, transparent 50%),
  #141210;

Gradient Text

.gradient-text {
  background: linear-gradient(135deg, #ff4d8b, #b8a4ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Performance Notes

CSS gradients are GPU-accelerated and perform better than gradient images.
Animating background-image (which gradients use) forces repaints. For animated gradients, animate background-position on an oversized gradient instead.
Very complex gradients with many stops can impact paint performance on mobile — keep it simple.

Generate Gradients Visually

Use ToolsVito's CSS Gradient Generator to pick colors, adjust stops, and copy ready-to-use CSS — no manual tweaking of color codes needed.