CSS Gradients
A gradient is a smooth blend between two or more colours. CSS draws it for you, so there is no image file to download.
Gradients are Images
You saw a simple gradient in the Backgrounds chapter. In CSS, a gradient counts as an image, so you use it with background-image (or the background shorthand), not with background-color.
| Function | Shape |
|---|---|
linear-gradient() | Colours change along a straight line |
radial-gradient() | Colours spread out from a centre point in a circle or ellipse |
conic-gradient() | Colours turn around a centre point, like a clock hand |
repeating-linear-gradient() and friends | The same pattern repeated again and again |
Linear Gradients: Direction
The first value is the direction. You can use words or an angle.
| Direction | Meaning |
|---|---|
to bottom | Top to bottom (the default) |
to right | Left to right |
to bottom right | Corner to corner |
45deg | An angle: 0deg points up, 90deg points right |
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.box {
height: 70px;
margin-bottom: 10px;
border-radius: 8px;
color: white;
padding: 10px;
}
.a { background: linear-gradient(#264de4, #06b6d4); }
.b { background: linear-gradient(to right, #f97316, #db2777); }
.c { background: linear-gradient(135deg, #16a34a, #0f172a); }
.d { background: linear-gradient(to right, red, orange, yellow, green, blue); }
</style>
</head>
<body>
<div class="box a">to bottom (default)</div>
<div class="box b">to right</div>
<div class="box c">135deg</div>
<div class="box d">Five colours</div>
</body>
</html>Colour Stops
After each colour, you can say where it should be, as a percentage or length. These are called colour stops.
Example
/* Blue stays solid until 70%, then blends to white */
background: linear-gradient(to right, #264de4 70%, white);If two colours share the same stop position, there is no blending at all: you get a hard line. This is how you draw stripes and flags with pure CSS.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flag {
width: 240px;
height: 160px;
background: linear-gradient(to right, white 25%, #01411c 25%);
border: 1px solid #cccccc;
}
.progress {
width: 240px;
height: 18px;
margin-top: 16px;
border-radius: 9px;
background: linear-gradient(to right, seagreen 65%, #e5e7eb 65%);
}
</style>
</head>
<body>
<div class="flag"></div>
<div class="progress"></div>
<p>Course progress: 65%</p>
</body>
</html>The first box shows the two colour areas of Pakistan's flag (white and green), and the second is a progress bar, both with no image.
Radial Gradients
radial-gradient() starts at a centre and spreads out.
Example
.glow {
background: radial-gradient(circle, gold, darkorange 60%, #7c2d12);
}
.spot {
background: radial-gradient(circle at top left, #93c5fd, #1e3a8a);
}circlemakes a round shape; without it the shape is anellipsethat matches the boxat top leftmoves the centre point
Conic Gradients
conic-gradient() turns colours around a point. It is great for pie charts.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.pie {
width: 180px;
height: 180px;
border-radius: 50%;
background: conic-gradient(
#264de4 0% 50%,
#f97316 50% 80%,
seagreen 80% 100%
);
}
</style>
</head>
<body>
<div class="pie"></div>
<p>Students: Web 50%, Design 30%, Freelancing 20%</p>
</body>
</html>Each colour has a start and an end stop, so the slices have sharp edges.
Repeating Gradients
The repeating- versions repeat the pattern until the box is full. They make stripes easily:
Example
.warning {
background: repeating-linear-gradient(
45deg,
#facc15 0 15px,
#111827 15px 30px
);
}Gradient Text
A popular modern effect: fill the letters with a gradient.
Example
.fancy {
background: linear-gradient(to right, #264de4, #db2777);
background-clip: text;
color: transparent;
}background-clip: text cuts the background to the shape of the letters, and the transparent text colour lets it show through.
Keep gradient text for big headings only. For normal paragraphs, solid colours are easier to read.
Layering Gradients
background can take several images separated by commas. The first one is on top. This lets you put a dark gradient over a photo so white text stays readable:
Example
.hero {
background:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)),
url("karachi.jpg") center / cover;
}Exercise
Exercise
Which gradient is best for drawing a pie chart?