CSS Gradients
A gradient is a smooth blend between two or more colors. It works anywhere a color works: backgrounds, borders, buttons, and even text. Gradients give pages depth without a single image file, so there is nothing extra for the browser to download. Pages stay fast and sharp at any size.
The browser draws a gradient mathematically. linear-gradient lays down a line through the element, in the direction you pick, and paints the colors along it. radial-gradient starts at a center point and spreads outward in rings, like a ripple. Both take a list of colors, and you can place each color with a stop value to control where the blend happens.
Read a gradient like a recipe: first the direction, then the colors. linear-gradient(135deg, #06b6d4, #8b5cf6) paints cyan in the top-left corner and violet in the bottom-right. Add stops, like #f59e0b 0%, #ef4444 50%, and the browser knows exactly where each color sits. You can combine any color formats, so rgba is handy for fading a color into transparency.
How a linear gradient is computed
The browser draws an invisible line through the element in the direction you give it. 90deg runs left to right, 0deg runs bottom to top, and 135deg runs diagonally from top-left to bottom-right. Colors are painted along that line, and color stops give each color an exact position. Without stops, the browser splits the line evenly between the colors.
background: linear-gradient(90deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
/* the stop numbers place each color exactly along the line */Radial gradients and glows
A radial gradient starts at a point and spreads outward in rings. radial-gradient(circle at center, #34d399, #0f766e) blooms from the middle of the element to its edges. Move the center with keywords like at top right for spotlight effects. Radial gradients are the go-to for glows, highlights, and anything that should feel like light.
background: radial-gradient(circle at center, #34d399, #0f766e);
/* center point first, then the colors, inside to outside */Gradient text
To paint text with a gradient, set the background to the gradient, clip it to the text with background-clip: text, and make the text color transparent so the background shows through. The prefixed version is still needed in Safari. Common mistakes: forgetting background-clip, forgetting the transparent color, or skipping the prefix. Fall back to a solid color for browsers that miss the feature.
h1 {
background: linear-gradient(90deg, #22d3ee, #a78bfa);
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* lets the gradient show through */
}Syntax
background: linear-gradient(135deg, #06b6d4, #8b5cf6);Gradient Banding on Chrome — Add Tiny Noise
Chrome shows banding on subtle gradients — add a 1% noise or use more color stops to smooth.
background: linear-gradient(135deg, #2563eb, #7c3aed)Good to know
- Gradients blend two or more colors and need no image files.
- Linear gradients run along a direction line; radial gradients spread from a center.
- Color stops control exactly where each color sits.
- Gradient text needs background-clip: text and a transparent text color.