CSS Gradients
Smooth color transitions for backgrounds, borders, and text.
1Linear Gradient
Transitions colors along a straight line. Specify an angle or direction.
.btn {
background: linear-gradient(135deg, #2563eb, #4f46e5);
}2Radial Gradient
Radiates outward from a center point — great for spotlights and orbs.
.glow {
background: radial-gradient(circle at center,
rgba(79,70,229,0.6), transparent 70%);
}3Conic & Multi-Stop
Conic gradients sweep around a point. Add multiple color stops for richer effects.
.pie {
background: conic-gradient(#4f46e5 0 25%, #ec4899 0 50%, #f59e0b 0 75%, #10b981 0 100%);
border-radius: 50%;
}4Understand it in a real interface
A gradient is a generated image, so its composition changes with the shape of the element it fills. Stops define how colors transition along the gradient line. A decorative color blend should still leave important text readable in every area it crosses.
5Try it yourself
Create a wide hero with two color stops and compare it with a square preview. Change the angle and add a middle stop to control the lightest region. Test the heading at a narrow width and add a solid background fallback.
Finished reading?
Mark this topic as complete to track progress.