Elevation
Shadow recipes for cards, popovers, and floating surfaces.
Each elevation step (--refineui-elevation-N) automatically switches between light and dark values based on the active theme. Use the bare variable — explicit *light / *dark suffixes are only needed when a surface must stay in one mode regardless of theme.
| Use | CSS |
|---|---|
| Theme-aware (recommended) | --refineui-elevation-8 |
| Force light | --refineui-elevation-8light |
| Force dark | --refineui-elevation-8dark |
shadow2
shadow4
shadow8
shadow16
shadow24
shadow32
shadow64
.panel { box-shadow: var(--refineui-elevation-8);}