New to Kendo UI for Vue? Start a free 30-day trial

Customizing Shadows

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$box-shadow-depth-1Stringk-elevation(1)var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for switch.
Equivalent to material elevation 1.
$box-shadow-depth-2Stringk-elevation(2)var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$box-shadow-depth-3Stringk-elevation(3)var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 3.
$box-shadow-depth-4Stringk-elevation(4)var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for drawers and other overlaying elements.
Equivalent to material elevation 4.
$box-shadow-depth-5Stringk-elevation(5)var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 6.
$box-shadow-depth-6Stringk-elevation(6)var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 8.
$box-shadow-depth-7Stringk-elevation(7)var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 12.
$box-shadow-depth-8Stringk-elevation(8)var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 16.
$box-shadow-depth-9Stringk-elevation(9)var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 24.
$elevationColork-map-get( $theme, elevation )#000000
Description
Color of shadows

In this article

Not finding the help you need?