94 Grounded Shadow. 94 of 95.
94/VISUAL DESIGN/94 of 95
Grounded Shadow
When something lifts, the shadow can stay on the ground.
The problem
Moving box-shadow with the element makes lift feel like a sticker sliding on glass — depth never changes.
The solution
Banner lifts while a separate contact shadow stays on the surface, fading and scaling with height.
Experiment
Play with the values
120px
380
28
700ms
How it works
- The notification and its contact shadow are siblings, so they can move independently.
- Only the banner lifts.
- The contact shadow stays on the surface underneath.
- As the banner rises, the shadow fades and scales with the distance.
- The result reads as physical elevation, not as a shadow glued to the moving card.
Seen in
Toast / notifications
Toasts lift into view while their contact shadow softens on the surface below.
Drag previews
A dragged card rises while the shadow stays under the original slot or shrinks beneath it.
Modal entrances
Dialogs ascend slightly with a grounded pool of shadow that doesn’t travel with the chrome.
Emphasis moments
A selected tile lifts for focus without dragging a fake attached drop shadow.