Customizing Shadows
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $elevation | map-get( $theme, elevation ) | map-get( $theme, elevation ) | |
Description 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 ) | 0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 ) | |
Description 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 ) | 0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 ) | |
Description 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 ) | 0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 ) | |
Description 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 ) | 0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 ) | |
Description 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 ) | 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 ) | |
Description Shadow for window and dialog. Equivalent to material elevation 24. | |||
