On this page
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.