Box Shadow

Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).

Default shadow

Default shadows are mainly used on things that need to appear elevated, like testimonial cards or UI elements containing important information.


Active shadow

Active shadows are mainly used on things that need to appear even more elevated, often in relation to other elevated elements to communicate hierarchy amongst the multiple elements with shadows.


Card shadow

Card shadows are used primarily for less elevated card elements that often are laid on top of other patterns but need to appear to be floating closer to what lies beneath them. Alternatively, if you want to apply a border to the card as well, please use the Card Border shadow.


Border shadow

Border shadows are primarily used to simulate a simple border that sits outside the bounds of the element with opacity allowing the border to blend with the background.


Card Border shadow

Card Border shadows combine the properties of the Card shadow and the Border shadow. These are primarily used for any card like element.


These types of shadows are typically applied to elements with borders, such as the Box component.