10
1 min read
Elevation & shadows
You copied a box-shadow from the last card you built. Then you tweaked the blur. Then you copied it again. Now the page has six different depths and no reason for any of them.
Elevation is a ladder. Flat, rest, raised, overlay. A card, a menu, and a toast share the same levels. You raise a surface by changing the token, not inventing a new shadow.
Invented shadows on the left. Card, menu, and toast on one ladder on the right.
Card
Menu
Toast
Card0 2px 8px
Menu0 6px 6px
Toast0 20px 50px
Card
Menu
Toast
Cardelevation.rest
Menuelevation.raised
Toastelevation.overlay
A raw shadow is a one-off. A level is a decision you can reuse tomorrow.
:root {
--elevation-flat: none;
--elevation-rest: 0 1px 2px color-mix(in oklch, canvasText 10%, transparent);
--elevation-raised: 0 4px 12px color-mix(in oklch, canvasText 14%, transparent);
--elevation-overlay: 0 12px 28px color-mix(in oklch, canvasText 18%, transparent);
}
.card { box-shadow: var(--elevation-rest); }
.menu { box-shadow: var(--elevation-raised); }
.toast { box-shadow: var(--elevation-overlay); }:root {
--elevation-flat: none;
--elevation-rest: 0 1px 2px color-mix(in oklch, canvasText 10%, transparent);
--elevation-raised: 0 4px 12px color-mix(in oklch, canvasText 14%, transparent);
--elevation-overlay: 0 12px 28px color-mix(in oklch, canvasText 18%, transparent);
}
.card { box-shadow: var(--elevation-rest); }
.menu { box-shadow: var(--elevation-raised); }
.toast { box-shadow: var(--elevation-overlay); }