What is a Gradient?
A gradient is a smooth transition between two or more colors. In CSS, gradients are images — they’re used anywhere an image is expected, most commonly with background-image.
linear-gradient
<style>
.box {
height: 100px;
background: linear-gradient(to right, #667eea, #764ba2);
}
</style>
<div class="box"></div>Gradient Direction
linear-gradient accepts a direction as a keyword (to right, to bottom left) or an angle in degrees (45deg), followed by two or more color stops.
Angles and Multiple Color Stops
<style>
.box {
height: 100px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
}
</style>
<div class="box"></div>radial-gradient
radial-gradient radiates outward from a center point instead of along a straight line, useful for spotlight or glow effects.
radial-gradient Example
<style>
.spot {
height: 120px;
background: radial-gradient(circle at center, #ffffff, #4facfe 70%);
}
</style>
<div class="spot"></div>conic-gradient
conic-gradient sweeps colors around a center point like a color wheel or pie chart, rather than radiating outward.
conic-gradient Example
<style>
.wheel {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(red, orange, yellow, green, blue, violet, red);
}
</style>
<div class="wheel"></div>Gradient Types
| Function | Direction |
|---|---|
| linear-gradient() | Along a straight line at a given angle |
| radial-gradient() | Radiating outward from a center point |
| conic-gradient() | Sweeping around a center point, like a color wheel |
Gradients Can Be Combined with Images
Multiple background-image values, including gradients and url() images, can be layered together, comma-separated — useful for tinting a photo with a gradient overlay.
Best Practice
Use online gradient generators or your browser’s DevTools color picker to fine-tune color stops — small angle and stop-position changes make a big visual difference.