CSS gradients let you create smooth transitions between colors without any image files. They are rendered by the browser, scale perfectly at any resolution, and can be animated. There are three types: linear, radial, and conic — each produces a fundamentally different shape.
linear-gradient
A linear gradient transitions colors along a straight line. The line can go in any direction.
background: linear-gradient(to right, #2563eb, #7c3aed)
/* Direction keywords */
background: linear-gradient(to right, #2563eb, #7c3aed);
background: linear-gradient(to bottom, #2563eb, #7c3aed);
background: linear-gradient(to bottom right, #2563eb, #7c3aed);
/* Angle in degrees */
background: linear-gradient(45deg, #2563eb, #7c3aed);
background: linear-gradient(135deg, #ec4899, #f97316, #eab308);
background: linear-gradient(135deg, #ec4899, #f97316, #eab308)
The angle 0deg points upward (same as to top). 90deg points right (same as to right). Angles increase clockwise.
Color stops
By default, colors are spaced evenly across the gradient. You can control exactly where each color starts and ends using color stops:
/* Even spacing (default) */
linear-gradient(to right, red, blue)
/* Explicit positions — percentage or px */
linear-gradient(to right, red 0%, red 40%, blue 60%, blue 100%)
/* Hard stop — no transition between colors */
linear-gradient(to right, red 50%, blue 50%)
When two consecutive color stops share the same position (both at 50%), there is no transition — the color changes instantly. This is how you create stripes.
You can use any CSS color format in a gradient — named colors, hex, RGB, HSL, or even transparent. transparent is equivalent to rgba(0,0,0,0) and fades the current color to nothing, which is useful for overlays and fade effects.
radial-gradient
A radial gradient emanates outward from a center point in a circle or ellipse.
background: radial-gradient(circle, #22d3ee, #2563eb)
/* Circle (uniform radius) */
background: radial-gradient(circle, #22d3ee, #2563eb);
/* Ellipse (default — stretches to fit the element) */
background: radial-gradient(ellipse, #22d3ee, #2563eb);
/* Control center position */
background: radial-gradient(circle at top left, #22d3ee, #2563eb);
background: radial-gradient(circle at 30% 70%, #22d3ee, #2563eb);
/* Subtle glow effect */
background: radial-gradient(ellipse at center, rgba(37,99,235,0.3), transparent 70%);
Radial gradients are commonly used for spotlight effects, soft glows behind hero sections, and giving depth to button backgrounds.
conic-gradient
A conic gradient sweeps colors around a center point, like the face of a clock. The transition happens around the angle, not across a line or radius.
background: conic-gradient(#f472b6, #fb923c, #facc15, #4ade80, #22d3ee, #c084fc, #f472b6)
/* Basic color wheel */
background: conic-gradient(red, yellow, green, blue, red);
/* Pie chart segments */
background: conic-gradient(
#2563eb 0% 30%, /* 30% blue slice */
#22c55e 30% 65%, /* 35% green slice */
#f97316 65% 100% /* 35% orange slice */
);
/* Start from a different angle */
background: conic-gradient(from 45deg, red, blue);
Layering multiple gradients
CSS allows stacking multiple gradients on the same element by separating them with commas. The first gradient listed is drawn on top:
background:
radial-gradient(circle at top right, rgba(124,58,237,0.15), transparent 50%),
radial-gradient(circle at bottom left, rgba(37,99,235,0.15), transparent 50%),
linear-gradient(to bottom, #0f172a, #1e293b);
This technique is widely used for hero section backgrounds — a dark base gradient with subtle radial glows layered on top to create depth.
Tip: Gradients in CSS are treated as images, so they work anywhere a CSS image works — background, border-image, mask-image, and even list-style-image. You can also animate gradients with CSS custom properties and transitions.