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. |
|||