Gradients
Learn to create smooth multi-color backgrounds using linear-gradient(), radial-gradient(), and conic-gradient(), including multiple color stops and practical UI applications.
A gradient is a smooth transition between two or more colors, generated directly by CSS with no image file required. Gradients are used constantly in real interfaces — subtle button backgrounds, photo overlays that fade to allow readable text, decorative section backgrounds, loading indicators, and more. CSS gradients are technically a type of image, which means they're used anywhere an image can be used — most commonly as a background-image value.
linear-gradient(): a straight-line blend
linear-gradient() blends colors along a straight line, which you can point in any direction. The simplest form, linear-gradient(red, blue), blends from red at one end to blue at the other, top to bottom by default. You can specify a direction with a keyword — linear-gradient(to right, red, blue) goes left to right — or with a precise angle: linear-gradient(45deg, red, blue) where 0deg points up and the angle increases clockwise.
Direction keywords can combine two axes for diagonal gradients: to bottom right, to top left, etc.
radial-gradient(): blending outward from a point
radial-gradient() blends colors outward from a center point in expanding rings (by default, ellipse-shaped to match the element's proportions), rather than along a straight line. radial-gradient(circle, yellow, orange) produces circular rings; the default shape without the circle keyword is ellipse, which stretches to match the box's aspect ratio.
You can also control the center point: radial-gradient(circle at top right, white, transparent) starts the radial blend from the element's top-right corner instead of its default center.
conic-gradient(): blending around a center, like a clock face
conic-gradient() blends colors around a center point in a rotational sweep, like the hands of a clock moving through the color stops, rather than radiating outward. This is the gradient type used for pie-chart-style visuals and color wheels. conic-gradient(red, yellow, green, blue, red) sweeps through those colors in a full circle, starting from the top by default.
Multiple color stops
Any gradient function accepts more than two colors, comma-separated: linear-gradient(red, yellow, green). By default, colors are spaced evenly, but you can explicitly control where each color stop sits using a percentage or length after the color: linear-gradient(red 0%, yellow 30%, green 100%) places yellow at 30% along the gradient instead of the default midpoint.
You can also create hard color bands (no smooth blending) by placing two colors at the same position: linear-gradient(red 50%, blue 50%) produces a sharp split with no gradation, useful for candy-stripe or flag-like patterns.
Practical UI examples
A subtle button background gradient (e.g. linear-gradient(to bottom, #4c8bf5, #3a6fd8)) adds gentle depth without needing an image file, and is trivially easy to adjust or theme by changing two color values.
A very common pattern for readable text over a photo is a gradient overlay: layering a linear-gradient(to top, rgba(0,0,0,0.7), transparent) on top of a background image (using the background shorthand's multiple-layer syntax, or an absolutely positioned overlay element) darkens just the bottom portion of the photo, keeping captions or titles legible without darkening the whole image uniformly.
The three gradient functions
Gradients are background IMAGES — assign them to background or background-image, not background-color. Multiple gradients (or a gradient plus an actual image) can be layered by comma-separating them in one background declaration.
.el {
/* Linear */
background: linear-gradient(red, blue);
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to bottom right, #4c8bf5, #3a6fd8);
/* Radial */
background: radial-gradient(circle, yellow, orange);
background: radial-gradient(circle at top right, white, transparent);
/* Conic */
background: conic-gradient(red, yellow, green, blue, red);
/* Multiple stops with explicit positions */
background: linear-gradient(to right, red 0%, yellow 30%, green 100%);
}Code Examples
A two-stop top-to-bottom gradient gives the button a subtle sense of depth compared to a flat single color, and a lighter hover-state gradient provides clear visual feedback — all without loading any image asset.
background: linear-gradient(to bottom, #5b9bf7, #3a6fd8);
Two background images are layered, comma-separated: the dark-to-transparent gradient sits on top (darkening only the bottom ~60% of the box) and the photo sits beneath it, so white caption text placed at the bottom stays readable against the photo.
.btn-primary {
background: linear-gradient(to bottom, #5b9bf7, #3a6fd8);
border: none;
color: white;
padding: 0.6rem 1.4rem;
border-radius: 6px;
}
.btn-primary:hover {
background: linear-gradient(to bottom, #6ba5f8, #4a7fe0);
}.photo-card {
background-image:
linear-gradient(to top, rgba(0,0,0,0.75), transparent 60%),
url("landscape.jpg");
background-size: cover;
color: white;
padding: 1rem;
display: flex;
align-items: flex-end;
min-height: 240px;
}Three gradient shapes
Linear blends along a line, radial expands outward from a point, conic sweeps around a point.
LINEAR RADIAL CONIC
▓▓▓░░░░ ░░▓▓░░ ▓░▓░▓
▓▓▓░░░░ ░▓▓▓▓░ ░ ● ░
▓▓▓░░░░ ▓▓▓▓▓▓ ░▓░▓░▓
straight line from a center sweeps around
blend point outward a center pointImportant Rules
Gradients are images — use them with background / background-image, never background-color.
linear-gradient() defaults to top-to-bottom if no direction is given; specify with a to <side> keyword or an angle in degrees.
radial-gradient() defaults to an ellipse shape and centers itself in the element unless circle and/or at <position> are specified.
conic-gradient() sweeps colors around a center point rather than blending along a line or outward from a point.
Explicit color-stop percentages (e.g. red 0%, yellow 30%) give precise control over where each color transition happens.
Where gradients show up in production design
Gradients are a staple of modern UI design systems for buttons, hero sections, loading skeletons, and badges, largely because they're cheap (no image request, trivially themeable by swapping CSS variables) and infinitely scalable with no pixelation at any screen size or resolution — a meaningful advantage over a gradient baked into a PNG or JPG image asset..hero { background-color: linear-gradient(red, blue); }.hero { background-image: linear-gradient(red, blue); } /* or the background shorthand */ background-color only accepts a single solid color value — gradients are a type of image and must be assigned via background-image or the background shorthand, not background-color.
linear-gradient(right, red, blue) linear-gradient(to right, red, blue)
Direction keywords require the to keyword before the side — right alone is not valid syntax for a gradient direction.
[Concept Matching] Which gradient function should you use to build a classic pie-chart slice or color-wheel effect, where colors sweep around a center point like the hands of a clock? A. linear-gradient(), because it supports angle values like 45deg B. radial-gradient(), because it's centered on a point C. conic-gradient(), because it sweeps colors around a center point rather than expanding outward or blending along a line D. None of these — pie charts require an actual image or SVG, not CSS gradients
C. conic-gradient(), because it sweeps colors around a center point rather than expanding outward or blending along a line — linear-gradient's angle controls the direction of a straight-line blend, not a rotational sweep. radial-gradient expands outward in rings from a center point. conic-gradient specifically sweeps color stops around a center point in a circle, which is exactly the geometry a pie-chart or color-wheel effect needs.
Write a background declaration for a .spinner element using a conic-gradient that goes from transparent to a solid blue color, creating a classic 'loading spinner' arc effect (this is commonly combined with border-radius: 50% and a spin animation, but just write the gradient here)..spinner { background: conic-gradient(transparent, #3a6fd8); border-radius: 50%; } conic-gradient(transparent, blue) — or, for a sharper visible arc rather than a full smooth sweep, add explicit stop positions like conic-gradient(transparent 0%, blue 100%).