CSS Gradient Examples: Linear, Radial, and Conic Gradients Explained

A CSS gradient is technically an image value. You use it anywhere you’d use url(image.jpg) in a CSS property — mostly background and background-image. The browser renders the transition itself, so there’s no file to download and no HTTP request.

Three types: linear, radial, and conic. Each behaves differently and each is useful for different things.

Build gradients visually and copy the CSS output.

Linear gradients

background: linear-gradient(135deg, #667eea, #764ba2);

The first argument is the direction. You can use keywords (to right, to bottom right) or degree values. Degrees work like a compass starting at 12 o’clock and going clockwise. 0deg is top-to-bottom, 90deg is left-to-right, 180deg is bottom-to-top.

Color stops are comma-separated. You can add as many as you want, and you can specify their position with a percentage:

background: linear-gradient(to right, #f093fb 0%, #f5576c 50%, #4facfe 100%);

Without explicit positions, stops distribute evenly. So a three-stop gradient puts the second color at 50% automatically.

You can also do hard stops — two color values at the same position creates a sharp edge with no transition:

/* Striped background */
background: linear-gradient(90deg, 
  #333 0%, #333 50%, 
  #fff 50%, #fff 100%
);

Radial gradients

background: radial-gradient(circle at center, #f093fb, #f5576c);

The shape is either circle or ellipse (ellipse is the default). The position uses the same syntax as background-position: keywords like at top left or percentages like at 30% 70%.

Radial gradients work well for spotlight effects, glows, and anything that should radiate outward from a point. A common use is a subtle vignette over a background image:

background: 
  radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%),
  url('/images/hero.jpg') center / cover;

This overlays a dark radial fade on top of the image, drawing attention to the center.

Conic gradients

background: conic-gradient(from 0deg, red, yellow, green, blue, red);

Conic gradients rotate around a center point instead of radiating outward. The colors sweep around like clock hands. They’re less common for backgrounds but great for pie charts:

/* Pie chart: 40% first section, 60% second */
background: conic-gradient(#4facfe 0 40%, #f093fb 0 100%);

The 0 before the second color means “start immediately where the previous stop ended” — a hard stop with no blend, which is what you want for a pie slice.

Layering gradients

CSS lets you stack multiple backgrounds, including multiple gradients. Layers are listed from front to back:

background: 
  linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.5)),
  linear-gradient(135deg, #667eea, #764ba2);

Top layer: a dark gradient that fades in from 60% down (good for text legibility over a colored background). Bottom layer: the colored gradient.

This is a common pattern for hero sections where you need text on top of a vibrant gradient background.

Text gradients

Gradient text needs three properties together:

.gradient-text {
  background: linear-gradient(90deg, #f093fb, #f5576c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

The -webkit- prefix is still required for Safari support. Setting color: transparent lets the gradient background show through the text shape. This works well for hero headings.

Animated gradients

transition can’t animate gradient values directly. But @keyframes combined with background-size and background-position can fake it convincingly:

.animated-bg {
  background: linear-gradient(270deg, #f093fb, #f5576c, #4facfe, #00f2fe);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

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

This creates a large gradient (400% wide) and slowly pans it across the element. The effect is a smooth, continuous color shift. Keep the animation duration long (6-10 seconds) so it doesn’t feel frantic.

Browser support

All three gradient types work in every modern browser. The -webkit-background-clip: text technique requires the prefix for Safari but otherwise has full support. Conic gradients landed in all major browsers in 2021.

Build gradients visually with a color picker, add stops by dragging, set animation options, and copy the output.