CSS · Chapter 37 of 44
CSS Gradients
Gradients create smooth transitions between two or more colors without needing an image, using functions like linear-gradient() and radial-gradient().
Gradients can be used anywhere a background-image is accepted, and can include multiple color stops and direction angles.
Syntax
background: linear-gradient(to right, color1, color2);Linear gradients
linear-gradient(direction, color1, color2, ...) blends colors along a straight line. Direction can be an angle (45deg) or a keyword (to right).
Radial gradients
radial-gradient(color1, color2, ...) blends colors outward from a center point, useful for spotlight or glow effects.
Example 1 (css)
.hero {
background: linear-gradient(135deg, #264de4, #6a11cb);
}Output
A diagonal gradient background transitioning from blue to purpleThe 135deg angle sets a diagonal direction blending the two specified colors.
Key points
- linear-gradient() blends colors along a straight line.
- radial-gradient() blends colors outward from a center point.
- Gradients can be used as any background-image value.
- You can include multiple color stops for complex blends.
💡 Note: Gradients are rendered by the browser, so they scale sharply at any resolution unlike images.