CSS Gradients
Gradients are CSS images you can use anywhere a background takes an image — no .png required.
Three flavours
| Function | Shape | Example |
|---|---|---|
linear-gradient | Straight line. | linear-gradient(45deg, #04AA6D, #2965F1) |
radial-gradient | Out from a point. | radial-gradient(circle, #fff, #04AA6D) |
conic-gradient | Around a centre. | conic-gradient(from 0deg, red, gold, lime, red) |
Colour stops
CSS
/* Smooth blend */ linear-gradient(#04AA6D, #2965F1); /* Hard stop — creates a two-tone stripe */ linear-gradient(#04AA6D 50%, #2965F1 50%); /* Multiple stops */ linear-gradient(45deg, #04AA6D 0%, #2965F1 50%, #E44D26 100%);
Repeating gradients = patterns
CSS
.stripes {
background: repeating-linear-gradient(
45deg,
#04AA6D 0 12px,
#038F5C 12px 24px
);
}
Tip: Layer a translucent linear gradient on top of a photo to darken it:
linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)), url(photo.jpg). Free dark mode for hero images.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Gradients</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Create a 45-degree gradient from green to blue.
.bg { background:
-gradient(45deg, #04AA6D, #2965F1); }
Straight-line direction.
Discussion
Loading…