Box shadow

Utilities for controlling the box shadow of an element.

In this article

Shadows simulate height above the surface of an interface and can be used to created a layering effect.

Class Properties
.shadow @include shadow();
.shadow-xs @include shadow-xs();
.shadow-sm @include shadow-sm();
.shadow-md @include shadow-md();
.shadow-lg @include shadow-lg();
.shadow-xl @include shadow-xl();
.shadow-solid @include shadow-solid();
.shadow-inner @include shadow-inner();
.shadow-outline @include shadow-outline();
.shadow-none box-shadow: none;

Usage

Outer shadow

Use the .shadow, .shadow-xs, .shadow-sm, .shadow-md, .shadow-lg or .shadow-xl utilities to apply different sized outer box shadows to an element.

<div class="shadow-xs"></div>
<div class="shadow-sm"></div>
<div class="shadow"></div>
<div class="shadow-md"></div>
<div class="shadow-lg"></div>
<div class="shadow-xl"></div>

Use .shadow-solid to apply a solid shadow to an element.

<div class="shadow-solid"></div>

Inner shadow

Use .shadow-inner to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells.

<div class="shadow-inner"></div>

Outline

Use .shadow-outline to apply a focus-ring-style shadow to an element.

<button class="button button-primary">Unfocused</button>
<button class="button button-primary shadow-outline">Focused</button>

No shadow

Use .shadow-none to remove an existing box shadow from an element.

Variants

By default, both responsive or hover-state variants are generated for box-shadow utilities.

Responsive

To control the box shadow for an element at a specific breakpoint, add a {screen}: prefix to any existing box shadow utility.

For example, use .md:shadow-md to apply the shadow-md utility at only medium screen sizes and above.

Hover-state

To control the box shadow for an element’s hover state, add a hover: prefix to any existing box shadow utility.

For example, use .hover:shadow-md to apply the shadow-md utility when the element’s hover state is active.

Questions or feedback about this article? Let us know