Colors Linear and Radial Gradients
CSS gradients paint a smooth blend between colors directly as a background, using linear-gradient() for straight-line transitions and radial-gradient() for transitions that radiate outward from a point.
Gradients as Backgrounds, Not Images
A CSS gradient isn't a picture file — it's a value the browser generates on the fly wherever a background-image is expected. That means no extra HTTP request, the blend stays perfectly crisp at any screen size or resolution, and it's easy to tweak colors and stops without touching a design tool.
Linear Gradients
linear-gradient() blends colors along a straight line. The first argument is optional and sets the direction: either a keyword like 'to right' or 'to top left', or an angle such as 45deg, measured clockwise starting from straight up (0deg points to the top; if you omit the direction entirely, it defaults to 'to bottom'). After the direction come two or more comma-separated colors, called color stops.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.banner {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.diagonal {
background: linear-gradient(45deg, #6a11cb, #2575fc);
}
</style>
</head>
<body>
<div class="banner">Banner</div>
<div class="diagonal">Diagonal</div>
</body>
</html>Radial Gradients
radial-gradient() blends colors outward from a central point instead of along a line. You can optionally set a shape (circle or the default ellipse), a size keyword (closest-side, farthest-side, closest-corner, farthest-corner), and a position using 'at', such as 'at top left' or 'at 50% 30%'. Color stops work the same way as in linear-gradient().
Example
<!DOCTYPE html>
<html>
<head>
<style>
.spotlight {
background: radial-gradient(circle at center, #fffef0, #f5d76e 60%, #333 100%);
}
.card-glow {
background: radial-gradient(ellipse farthest-corner at top left, #89f7fe, #66a6ff);
}
</style>
</head>
<body>
<div class="spotlight">Spotlight</div>
<div class="card-glow">Card Glow</div>
</body>
</html>Gradients can also be layered: separate multiple gradients with commas inside a single background property, and the first one listed sits on top. There's also a repeating-linear-gradient() / repeating-radial-gradient() variant for the same syntax that tiles the color stops into a repeating pattern, useful for stripes or rings.
- to right / to left — horizontal blend
- to top / to bottom — vertical blend (bottom is the default if no direction is given)
- to bottom right / to top left — diagonal toward a corner
- <angle>deg — precise custom angle, measured clockwise from the top
Exercise: Colors Gradients
In CSS, what kind of value does linear-gradient() produce?
