Skip to main content

Shadows

Ask AI
Copy a prompt to ask an AI assistant about this page.

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);
}