Shadows

EUI provides 5 shadow sizes (xs, s, m, l, xl) that can be applied in two directions: down (default) and up.

It's not recommended to use shadow tokens directly

Use the euiShadow() utility to apply shadows instead. This utility handles theme tokens and automatically adds required adjustments for dark mode and high contrast mode that ensure expected visibility. Read more about the shadow utils here.

Direction: down

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
shadows.xs.down ↦	shadows.xs.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px 2px 8px 0px hsla(216.67,29.51%,23.92%,0.04) ↵
shadows.s.down ↦	shadows.s.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px 4px 11px 0px hsla(216.67,29.51%,23.92%,0.05) ↵
shadows.m.down ↦	shadows.m.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 3px 10px 0px hsla(216.67,29.51%,23.92%,0.1), 0px 6px 14px 0px hsla(216.67,29.51%,23.92%,0.06) ↵
shadows.l.down ↦	shadows.l.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 4px 13px 0px hsla(216.67,29.51%,23.92%,0.12), 0px 8px 17px 0px hsla(216.67,29.51%,23.92%,0.07) ↵
shadows.xl.down ↦	shadows.xl.down ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 5px 16px 0px hsla(216.67,29.51%,23.92%,0.14), 0px 10px 20px 0px hsla(216.67,29.51%,23.92%,0.08) ↵

𐘂𐘂

Direction: up

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
shadows.xs.up ↦	shadows.xs.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -1px 4px 0px hsla(216.67,29.51%,23.92%,0.06), 0px -2px 8px 0px hsla(216.67,29.51%,23.92%,0.04) ↵
shadows.s.up ↦	shadows.s.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px -4px 11px 0px hsla(216.67,29.51%,23.92%,0.05) ↵
shadows.m.up ↦	shadows.m.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -3px 10px 0px hsla(216.67,29.51%,23.92%,0.1), 0px -6px 14px 0px hsla(216.67,29.51%,23.92%,0.06) ↵
shadows.l.up ↦	shadows.l.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -4px 13px 0px hsla(216.67,29.51%,23.92%,0.12), 0px -8px 17px 0px hsla(216.67,29.51%,23.92%,0.07) ↵
shadows.xl.up ↦	shadows.xl.up ↦	Value 0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -5px 16px 0px hsla(216.67,29.51%,23.92%,0.14), 0px -10px 20px 0px hsla(216.67,29.51%,23.92%,0.08) ↵

𐘂𐘂