CSS Advanced
CSS Gradients
Gradients are images generated by CSS that blend smoothly between two or more colors. There are three types: linear (along a line), radial (out from a point), and conic (around a center). They need no image files and scale perfectly at any size.
Linear gradients
linear-gradient() transitions colors along a straight line. You can specify a direction with a keyword (to right) or an angle (45deg), followed by two or more color stops.
background: linear-gradient(to right, #f97316, #db2777);
background: linear-gradient(45deg, #22d3ee 0%, #818cf8 50%, #f472b6 100%);<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display: grid;
grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; background:#0f172a; }
.g { height: 110px; border-radius: 12px; display:flex;
align-items:center; justify-content:center; color:#fff; font-weight:bold; }
.g1 { background: linear-gradient(to right, #06b6d4, #3b82f6); }
.g2 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.g3 { background: linear-gradient(to bottom, #22c55e, #065f46); }
.g4 { background: linear-gradient(90deg, #a855f7, #ec4899, #f97316); }
</style>
</head>
<body>
<div class="g g1">to right</div>
<div class="g g2">135deg</div>
<div class="g g3">to bottom</div>
<div class="g g4">3 stops</div>
</body>
</html>Radial gradients
radial-gradient() radiates colors outward from a center point. You can set the shape (circle or ellipse), size, and position, then list color stops from the center outward.
<!DOCTYPE html>
<html>
<head>
<style>
body { margin:0; height: 240px; display:grid; place-items:center;
background: radial-gradient(circle at 50% 40%, #1e3a8a, #020617); }
.orb {
width: 140px; height: 140px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fef9c3, #f97316 55%, #7c2d12);
box-shadow: 0 0 60px rgba(249,115,22,.6);
}
</style>
</head>
<body>
<div class="orb"></div>
</body>
</html>Conic gradients
conic-gradient() sweeps colors around a center point like a color wheel or pie chart. Because color stops are placed at angles, it is perfect for donut charts, spinners, and color pickers.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:flex; gap:30px; padding:30px; background:#111827; align-items:center; }
.pie {
width: 130px; height: 130px; border-radius: 50%;
background: conic-gradient(#22d3ee 0 40%, #a78bfa 40% 65%, #f472b6 65% 100%);
}
.wheel {
width: 130px; height: 130px; border-radius: 50%;
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
</style>
</head>
<body>
<div class="pie"></div>
<div class="wheel"></div>
</body>
</html>Color stops and repeating gradients
Each color can carry one or two position values. Giving a color two positions creates a hard edge (a stripe) instead of a smooth blend. The repeating-* variants tile the stop pattern to fill the box.
| Function | Best for |
|---|---|
| linear-gradient() | Buttons, banners, directional fades |
| radial-gradient() | Glows, spotlights, vignettes |
| conic-gradient() | Pie/donut charts, color wheels, spinners |
| repeating-linear-gradient() | Stripes, hazard patterns |
background: repeating-linear-gradient(
45deg, #facc15 0 20px, #1e293b 20px 40px
);Gradients are images, so you can layer them and combine them with background-size and multiple backgrounds for rich effects.
Two color stops at the same position (e.g. red 40%, blue 40%) create a crisp line instead of a blend, useful for pie slices and stripes.
Key points
- linear-gradient blends along a line set by a keyword or angle.
- radial-gradient blends outward from a center point.
- conic-gradient sweeps colors around a center for charts and wheels.
- Color stops can take positions to control where each color sits.
- repeating-* functions tile the stop pattern to make stripes.