View on GitHub

Shadows

Add or remove shadows to elements with box-shadow utilities.

On this page

Box-shadow styles are referred to as ’elevation’ within the design system.

Examples

You can quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and new semantic helpers.

No shadow
Default shadow
Drag shadow
Emphasized shadow
Raised shadow
Sticky default shadow
Sticky emphasized shadow
Sticky navigation shadow
<div class="shadow-none p-lg mb-4xl bg-secondary">No shadow</div>
<div class="shadow-default p-lg mb-4xl bg-secondary">Default shadow</div>
<div class="shadow-drag p-lg mb-4xl bg-secondary">Drag shadow</div>
<div class="shadow-emphasized p-lg mb-4xl bg-secondary">Emphasized shadow</div>
<div class="shadow-raised p-lg mb-4xl bg-secondary">Raised shadow</div>
<div class="shadow-sticky-default p-lg mb-4xl bg-secondary">Sticky default shadow</div>
<div class="shadow-sticky-emphasized p-lg mb-4xl bg-secondary">Sticky emphasized shadow</div>
<div class="shadow-sticky-navigation-scrolled p-lg mb-4xl bg-secondary">Sticky navigation shadow</div>
html
Bootstrap $enable-bootstrap-compatibility: true

Includes support for three default sizes (which have associated variables to match).

No shadow
Small shadow
Regular shadow
Larger shadow
<div class="shadow-none p-3 mb-5 bg-body-tertiary">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body-tertiary">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body-tertiary">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body-tertiary">Larger shadow</div>
html

CSS

Sass tokens

Semantic tokens

Shadow semantic tokens as Sass variables.

scss/tokens/_semantic.scss 
$ouds-elevation-blur-default: $core-ouds-elevation-blur-300;
$ouds-elevation-blur-drag: $core-ouds-elevation-blur-400;
$ouds-elevation-blur-emphasized: $core-ouds-elevation-blur-600;
$ouds-elevation-blur-none: $core-ouds-elevation-blur-0;
$ouds-elevation-blur-raised: $core-ouds-elevation-blur-200;
$ouds-elevation-blur-sticky-default: $core-ouds-elevation-blur-400;
$ouds-elevation-blur-sticky-emphasized: $core-ouds-elevation-blur-400;
$ouds-elevation-blur-sticky-navigation-scrolled: $core-ouds-elevation-blur-400;
$ouds-elevation-color-default: $core-ouds-color-opacity-black-240;
$ouds-elevation-color-drag: $core-ouds-color-opacity-black-320;
$ouds-elevation-color-emphasized: $core-ouds-color-opacity-black-160;
$ouds-elevation-color-none: $core-ouds-color-opacity-black-0;
$ouds-elevation-color-raised: $core-ouds-color-opacity-black-320;
$ouds-elevation-color-sticky-default: $core-ouds-color-opacity-black-160;
$ouds-elevation-color-sticky-emphasized: $core-ouds-color-opacity-black-160;
$ouds-elevation-color-sticky-navigation-scrolled: $core-ouds-color-opacity-black-160;
$ouds-elevation-spread-default: $core-ouds-elevation-spread-n100;
$ouds-elevation-spread-drag: $core-ouds-elevation-spread-n100;
$ouds-elevation-spread-emphasized: $core-ouds-elevation-spread-n300;
$ouds-elevation-spread-none: $core-ouds-elevation-spread-0;
$ouds-elevation-spread-raised: $core-ouds-elevation-spread-0;
$ouds-elevation-spread-sticky-default: $core-ouds-elevation-spread-n100;
$ouds-elevation-spread-sticky-emphasized: $core-ouds-elevation-spread-n100;
$ouds-elevation-spread-sticky-navigation-scrolled: $core-ouds-elevation-spread-n100;
$ouds-elevation-x-default: $core-ouds-elevation-x-0;
$ouds-elevation-x-drag: $core-ouds-elevation-x-0;
$ouds-elevation-x-emphasized: $core-ouds-elevation-x-0;
$ouds-elevation-x-none: $core-ouds-elevation-x-0;
$ouds-elevation-x-raised: $core-ouds-elevation-x-0;
$ouds-elevation-x-sticky-default: $core-ouds-elevation-x-0;
$ouds-elevation-x-sticky-emphasized: $core-ouds-elevation-x-0;
$ouds-elevation-x-sticky-navigation-scrolled: $core-ouds-elevation-x-0;
$ouds-elevation-y-default: $core-ouds-elevation-y-200;
$ouds-elevation-y-drag: $core-ouds-elevation-y-300;
$ouds-elevation-y-emphasized: $core-ouds-elevation-y-500;
$ouds-elevation-y-none: $core-ouds-elevation-y-0;
$ouds-elevation-y-raised: $core-ouds-elevation-y-100;
$ouds-elevation-y-sticky-default: $core-ouds-elevation-y-300;
$ouds-elevation-y-sticky-emphasized: $core-ouds-elevation-y-300;
$ouds-elevation-y-sticky-navigation-scrolled: $core-ouds-elevation-y-300;

Composite tokens

Shadow composite tokens are defined as Sass variables.

scss/tokens/_composite.scss 
$ouds-elevation-default: $ouds-elevation-x-default $ouds-elevation-y-default $ouds-elevation-blur-default $ouds-elevation-spread-default var(--#{$prefix}elevation-color-default);
$ouds-elevation-drag: $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag var(--#{$prefix}elevation-color-drag);
$ouds-elevation-emphasized: $ouds-elevation-x-emphasized $ouds-elevation-y-emphasized $ouds-elevation-blur-emphasized $ouds-elevation-spread-emphasized var(--#{$prefix}elevation-color-emphasized);
$ouds-elevation-none: $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none var(--#{$prefix}elevation-color-none);
$ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised var(--#{$prefix}elevation-color-raised);
$ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default var(--#{$prefix}elevation-color-sticky-default);
$ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized var(--#{$prefix}elevation-color-sticky-emphasized);
$ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled var(--#{$prefix}elevation-color-sticky-navigation-scrolled);

Sass variables

scss/_variables.scss 
$box-shadow:        $ouds-elevation-default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
$box-shadow-sm:     $ouds-elevation-default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
$box-shadow-lg:     $ouds-elevation-emphasized; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
$box-shadow-inset:  null; // OUDS mod: instead of `inset 0 1px 2px rgba($black, .075)`

Sass maps

scss/_maps.scss 
$ouds-elevations: (
  "default":                    $ouds-elevation-default,
  "drag":                       $ouds-elevation-drag,
  "emphasized":                 $ouds-elevation-emphasized,
  "none":                       $ouds-elevation-none,
  "raised":                     $ouds-elevation-raised,
  "sticky-default":             $ouds-elevation-sticky-default,
  "sticky-emphasized":          $ouds-elevation-sticky-emphasized,
  "sticky-navigation-scrolled": $ouds-elevation-sticky-navigation-scrolled
);

Sass utilities API

Shadow utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss 
"shadow-ouds": (
  property: box-shadow,
  class: shadow,
  values: $ouds-elevations
),
Bootstrap $enable-bootstrap-compatibility: true
scss/_utilities.scss 
"shadow": (
  property: box-shadow,
  class: shadow,
  values: (
    null: var(--#{$prefix}box-shadow),
    sm: var(--#{$prefix}box-shadow-sm),
    lg: var(--#{$prefix}box-shadow-lg),
    // OUDS mod: `none` value handled by `shadow-ouds`
  ),
  bootstrap-compatibility: true
),
// scss-docs-end utils-shadow
// OUDS mod
// scss-docs-start utils-shadow-ouds
"shadow-ouds": (
  property: box-shadow,
  class: shadow,
  values: $ouds-elevations
),