Color Transitions
Background, border, text color, and box-shadow color all transition smoothly. CSS interpolates between color values in the RGB color space.
CSS
Intermediate
4 min read
Transitioning Colors
Example
.alert {
background-color: #d1ecf1;
border-color: #bee5eb;
color: #0c5460;
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.alert.error {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
} Pro Tip
Use CSS custom properties for theme colors — changing one variable transitions all elements using it simultaneously.