Customizing Shadows

The following table lists the available variables for customization.

NameDefault valueDescription
$elevation map-get( $theme, elevation ) Color of shadows
$box-shadow-depth-1 0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 ) Shadow for switch.
Equivalent to material elevation 1.
$box-shadow-depth-2 0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 ) Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$box-shadow-depth-3 0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 ) Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 8.
$box-shadow-depth-4 0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 ) Shadow for drawers and other overlaying elements.
Equivalent to material elevation 16.
$box-shadow-depth-5 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 ) Shadow for window and dialog.
Equivalent to material elevation 24.