Definition
CSS features for creating browser-generated linear and radial color transitions.
Why It Matters
Gradients provide rich visual effects without the performance overhead or fixed resolution of image files.
Core Concepts
- Linear Gradient:
linear-gradient(to right, red, yellow). - Radial Gradient:
radial-gradient(circle, blue, green).
.hero {
/* Linear gradient from top to bottom */
background-image: linear-gradient(#4facfe 0%, #00f2fe 100%);
}
.button {
/* Radial gradient centered in the element */
background-image: radial-gradient(circle, #f6d365 0%, #fda085 100%);
}