Transitioning Box Shadows
Box shadow transitions create elegant elevation effects. Define both a default and hover shadow and transition between them.
CSS
Intermediate
4 min read
Box Shadow Transitions
Example
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} Pro Tip
Transitioning box-shadow instead of adding it on hover avoids the layout shift that occurs when shadows first appear.