Shadows
Six shadows, from a slight lift to a floating menu.
shadow-sm --elevation-sm
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 1px 3px 0px #00000024 shadow-base --elevation-base
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000029, 0px 2px 5px 0px #00000024 shadow-md --elevation-md
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000026, 0px 0px 6px 2px #0000000a, 0px 6px 12px -2px #00000014 shadow-lg --elevation-lg
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #0000002e, 0px 0px 6px 3px #00000008, 0px 18px 22px -6px #0000001a shadow-xl --elevation-xl
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 0px 10px 2px #0000000a, 0px 24px 30px -8px #0000001a shadow-2xl --elevation-2xl
inset 0px 0.25px 2px 0px #ffffff29, 0px 0px 1.5px 0px #00000040, 0px 0px 10px 2px #00000008, 0px 44px 52px -10px #0000001aUsage
Pairing with a surface
Shadows are hard to see on a dark background, so in dark mode a raised element needs a lighter surface instead. The surface-elevation-* tokens do this: they are white in light mode and lighter than the page in dark mode. Pair a shadow with one of them, and the element looks raised in both themes.
The pairs frappe-ui components use:
| Element | Surface | Shadow |
|---|---|---|
| Active sidebar item, active tab | bg-surface-elevation-3 | shadow-sm or shadow-base |
| Dialog | bg-surface-elevation-1 | shadow-xl |
| Menu, dropdown, popover | bg-surface-elevation-2 | shadow-2xl |
Using the values in CSS
Each shadow is a CSS variable, as in box-shadow: var(--elevation-md).