'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Level 0 0 dp semantic
--md-sys-elevation-shadow-level0Elevation · Learn
Elevation
Elevation describes the perceived distance between surfaces in density-independent pixels. On the web, Etesie stores Material's level number and emits the shadow for that level.
One ordinal, two visual signals
Pair a shadow level with the appropriate surface-container-* role.
Tone carries containment even where shadows are subtle.
Level 1 1 dp semantic
--md-sys-elevation-shadow-level1Level 2 3 dp semantic
--md-sys-elevation-shadow-level2Level 3 6 dp semantic
--md-sys-elevation-shadow-level3Level 4 8 dp semantic
--md-sys-elevation-shadow-level4Level 5 12 dp semantic
--md-sys-elevation-shadow-level5Surface tint overlays are retired
Material's 2021 surface-tint overlay changed a surface color as it rose. Tone-based surface-container-lowest through surface-container-highest now express that hierarchy directly.
Shadow tint is different
The optional recipe mixes the shadow color toward the scheme's neutral-variant surface. It changes the shadow itself, not the elevated surface, and its tokens are marked Derived from Color.