Skip to main content

Shadows

Shadows serve as crucial visual elements that add depth, create dimension, and enhance the perception of hierarchy within your application.

All shadows are provided as custom properties. To access them the var() CSS function can be called with the shadow's name:

.some-example {
  box-shadow: var(--theme-shadow-1);
}