Box Shadows

Shadows are used to convey depth between UI elements. For the most part, this type of elevation is reserved for transient components that appear elevated and are dismissible (e.g., dropdown menus).

We have 3 main shadow styles depending on the element’s size:

container / md
0 0 6px 1px rgba(40,50,67,0.15)
box_shadow
The shadow we used for medium-sized components like elevated cards or menus.
container / lg
0 0 8px 1px rgba(40,50,67,0.15)
box_shadow
The recommended box shadow for large containers, like modals or popovers.
container / sm
0 0 4px 1px rgba(40,50,67,0.15)
box_shadow
The shadow we used for small-sized components like tooltips.

 

Layout
Responsive Design
Box Shadows
Usage
Something looks broken on this site?

Report it to the Design System team here!

Resources
Support

© 2025 Spark Flare 4.0. Page last updated on Oct 9, 2024, 18:54