Drop Shadow
Utilities for controlling the drop shadow of an element.
| Class Name | CSS Equivalent |
|---|---|
| drop-shadow-level-0 | --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-0); |
| drop-shadow-level-1 | --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-1); |
| drop-shadow-level-2 | --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-2); |
| drop-shadow-level-3 | --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-3); |
| drop-shadow-level-4 | --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-4); |
| drop-shadow-level-5 | --cds-sys-filter-drop-shadow: var(--cds-sys-filter-drop-shadow-level-5); |
Setting the drop shadow
Control the drop shadow of an element using the drop-shadow-{level} utilities.
html
<img class="filter drop-shadow-level-0" src="..." /> <img class="filter drop-shadow-level-3" src="..." />❗ Keep in mind
To establish filters like drop shadow, it's essential to commence class declarations with filter.
This action defines a default filter for the element.
css
filter: blur(var(--cds-sys-filter-blur, var(--cds-sys-filter-blur-none))) contrast(var(--cds-sys-filter-contrast, 100%)) contrast(var(--cds-sys-filter-contrast, 100%)) drop-shadow(var(--cds-sys-filter-drop-shadow, 0 0 0 #000)) grayscale(var(--cds-sys-filter-grayscale, 0%)) hue-rotate(var(--cds-sys-filter-hue-rotate, 0deg)) invert(var(--cds-sys-filter-invert, 0%)) saturate(var(--cds-sys-filter-saturate, 100%)) sepia(var(--cds-sys-filter-sepia, 0%));Subsequently, varying drop shadow effects can be implemented by assigning classes as outlined on this page.