Elevation
Elevation Levels
| Name | CSS Box Shadow | Beschreibung |
|---|---|---|
Elevation/High | 0px 12px 28px -4px #3333331f, 0px 4px 8px -2px #33333314 | Use for: modals, dialogs, drawers |
Elevation/Highest | 0px 20px 28px 0px #33333324, 0px 8px 16px -4px #33333314 | Use for: toasts, notifications, command palette, top-level overlays, floating elements |
Elevation/Low | 0px 1px 3px 0px #3333331a, 0px 1px 2px 0px #3333330f | Use for: cards, input fields, slight surface separation |
Elevation/Medium | 0px 4px 12px -2px #3333331a, 0px 2px 4px -1px #3333330f | Use for: dropdowns, select menus, hover-elevated cards |
Elevation/None | 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00 | No elevation, no shadow |