Box shadow

Small

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

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

Medium

Medium box shadows are more diffused and slightly larger than small box shadows.

Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable.

Large

Large box shadows are very diffused and used sparingly in the product UI.

These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.

Extra large

Extra large box shadows are even more diffused.

These shadows are used for marketing content and content that appears on top of other page elements.

Remove a box shadow

Additionally there is a box-shadow-none class that removes box-shadow: