Shadows

The shadow properties are used to add shadow effects around an element's frame. You can set multiple effects separated by commas. In most cases, shadows are utilized to signify items that are layered on top of each other in the user interface.

Example

.element {
  box-shadow: var(--dwc-shadow-xl);
}

Shadow Color

You control the shadow color by setting the --dwc-shadow-color variable. By default the shadow color is gray tinted with the primary color.

Variables

Variable	Example
--dwc-shadow-xs
--dwc-shadow-s
--dwc-shadow-m
--dwc-shadow-l
--dwc-shadow-xl
--dwc-shadow-2xl
--dwc-shadow