Shadows

Box-shadow utilities spanning elevation levels, color tinting, and hover transitions.

@layer utilities

Scoped tokens

Examples

Shadow utilities add or remove box-shadow using a scale of elevation levels. The $enable-component-shadows Sass variable controls whether component shadows are enabled globally; utility classes apply shadows independently of that setting.

No shadow

Small shadow

Medium shadow

Large shadow

Inset shadow

Emboss shadow

<div class="shadow-none rounded p-medium mb-xlarge">No shadow</div>
<div class="shadow-small rounded p-medium mb-xlarge">Small shadow</div>
<div class="shadow rounded p-medium mb-xlarge">Medium shadow</div>
<div class="shadow-large rounded p-medium mb-xlarge">Large shadow</div>
<div class="shadow-inset rounded p-medium mb-medium">Inset shadow</div>
<div class="shadow-emboss rounded p-medium">Emboss shadow</div>

Elevation scale

Elevation utilities map to design token names.

This is $cx-shadow-elevation-default-05 shadow.

This is $cx-shadow-elevation-default-10 shadow.

This is $cx-shadow-elevation-default-20 shadow.

This is $cx-shadow-elevation-default-30 shadow.

This is $cx-shadow-elevation-default-40 shadow.

This is $cx-shadow-elevation-default-50 shadow.

This is $cx-shadow-elevation-default-60 shadow.

This is $cx-shadow-elevation-default-70 shadow.

This is $cx-shadow-elevation-default-80 shadow.

This is $cx-shadow-elevation-default-90 shadow.

This is $cx-shadow-elevation-default-95 shadow.

<p class="shadow-05">...</p>
<p class="shadow-10">...</p>
<p class="shadow-20">...</p>
<p class="shadow-30">...</p>
<p class="shadow-40">...</p>
<p class="shadow-50">...</p>
<p class="shadow-60">...</p>
<p class="shadow-70">...</p>
<p class="shadow-80">...</p>
<p class="shadow-90">...</p>
<p class="shadow-95">...</p>

Color shadows

Shadow utilities support color tinting through a CSS variable mechanism — a transparent --cx-shadow-color channel is built into each elevation class, and a color utility activates it.

How it works

Each elevation class defines --cx-shadow-color: transparent alongside the shadow value. Color shadow classes (.shadow-primary, etc.) set --cx-shadow-color using CSS relative color syntax derived from the context color variable. The transparent shadow layer then becomes visible with a tint. This approach avoids generating every color × elevation combination at compile time.

.shadow-50 {
  --cx-shadow-color: transparent;
  box-shadow: 0rem 0.5rem 2rem -0.5rem rgba(0, 0, 0, 0.1), 0rem 0.15rem 1rem -0.15rem var(--cx-shadow-color, transparent), 0rem 0.15rem 1rem -0.15rem rgba(0, 0, 0, 0.1) !important;
}
.shadow-primary {
  --cx-shadow-color: oklch(from var(--cx-primary) l c h / 0.1);
}

While this way is not yet in direct control of designer but helps to avoid increasing file size by creating every color shadows including their hover states.

Color tinting

Color tinting is applied by combining an elevation class with a context color shadow class.

This is $cx-shadow-elevation-primary-05 shadow.

This is $cx-shadow-elevation-primary-10 shadow.

This is $cx-shadow-elevation-primary-20 shadow.

This is $cx-shadow-elevation-primary-30 shadow.

This is $cx-shadow-elevation-primary-40 shadow.

This is $cx-shadow-elevation-primary-50 shadow.

This is $cx-shadow-elevation-primary-60 shadow.

This is $cx-shadow-elevation-primary-70 shadow.

This is $cx-shadow-elevation-primary-80 shadow.

This is $cx-shadow-elevation-primary-90 shadow.

This is $cx-shadow-elevation-primary-95 shadow.

<p class="shadow-primary shadow-05">...</p>
<p class="shadow-primary shadow-10">...</p>
<p class="shadow-primary shadow-20">...</p>
<p class="shadow-primary shadow-30">...</p>
<p class="shadow-primary shadow-40">...</p>
<p class="shadow-primary shadow-50">...</p>
<p class="shadow-primary shadow-60">...</p>
<p class="shadow-primary shadow-70">...</p>
<p class="shadow-primary shadow-80">...</p>
<p class="shadow-primary shadow-90">...</p>
<p class="shadow-primary shadow-95">...</p>

Hover shadows

Appending -hover to any shadow class applies the shadow only on :hover.

This is a hover shadow.

This is a shadow with primary hover.

<p class="shadow-30-hover p-medium rounded">This is a hover shadow.</p>
<p class="shadow-primary-hover shadow-50 p-medium rounded">This is a shadow with primary hover.</p>

CSS

Reference

Class	Properties
`.shadow`	`box-shadow: var(--cx-box-shadow-medium);`
`.shadow-small`	`box-shadow: var(--cx-box-shadow-small);`
`.shadow-large`	`box-shadow: var(--cx-box-shadow-large);`
`.shadow-inset`	`box-shadow: var(--cx-box-shadow-inset);`
`.shadow-emboss`	`box-shadow: var(--cx-box-shadow-emboss);`
`.shadow-none`	`box-shadow: none;`
`.shadow-95`	`box-shadow: 0rem 1.25rem 5rem -1.25rem rgba(0, 0, 0, 0.1), 0rem 0.625rem 2.5rem -0.625rem var(--cx-shadow-color, transparent), 0rem 0.625rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1);`
`.shadow-90`	`box-shadow: 0rem 1rem 4rem -1rem rgba(0, 0, 0, 0.1), 0rem 0.5rem 2rem -0.5rem var(--cx-shadow-color, transparent), 0rem 0.5rem 2rem -0.5rem rgba(0, 0, 0, 0.1);`
`.shadow-80`	`box-shadow: 0rem 0.875rem 3.5rem -0.875rem rgba(0, 0, 0, 0.1), 0rem 0.4375rem 1.75rem -0.4375rem var(--cx-shadow-color, transparent), 0rem 0.4375rem 1.75rem -0.4375rem rgba(0, 0, 0, 0.1);`
`.shadow-70`	`box-shadow: 0rem 0.75rem 3rem -0.75rem rgba(0, 0, 0, 0.1), 0rem 0.375rem 1.5rem -0.375rem var(--cx-shadow-color, transparent), 0rem 0.375rem 1.5rem -0.375rem rgba(0, 0, 0, 0.1);`
`.shadow-60`	`box-shadow: 0rem 0.625rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1), 0rem 0.3125rem 1.25rem -0.3125rem var(--cx-shadow-color, transparent), 0rem 0.3125rem 1.25rem -0.3125rem rgba(0, 0, 0, 0.1);`
`.shadow-50`	`box-shadow: 0rem 0.5rem 2rem -0.5rem rgba(0, 0, 0, 0.1), 0rem 0.25rem 1rem -0.25rem var(--cx-shadow-color, transparent), 0rem 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1);`
`.shadow-40`	`box-shadow: 0rem 0.375rem 1.5rem -0.375rem rgba(0, 0, 0, 0.1), 0rem 0.1875rem 0.75rem -0.1875rem var(--cx-shadow-color, transparent), 0rem 0.1875rem 0.75rem -0.1875rem rgba(0, 0, 0, 0.1);`
`.shadow-30`	`box-shadow: 0rem 0.3125rem 1.25rem -0.3125rem rgba(0, 0, 0, 0.1), 0rem 0.1563rem 0.625rem -0.1563rem var(--cx-shadow-color, transparent), 0rem 0.1563rem 0.625rem -0.1563rem rgba(0, 0, 0, 0.1);`
`.shadow-20`	`box-shadow: 0rem 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1), 0rem 0.125rem 0.5rem -0.125rem var(--cx-shadow-color, transparent), 0rem 0.125rem 0.5rem -0.125rem rgba(0, 0, 0, 0.1);`
`.shadow-10`	`box-shadow: 0rem 0.125rem 0.5rem -0.125rem rgba(0, 0, 0, 0.1), 0rem 0.0625rem 0.25rem -0.0625rem var(--cx-shadow-color, transparent), 0rem 0.0625rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.1);`
`.shadow-05`	`box-shadow: 0rem 0.0625rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.1), 0rem 0.0313rem 0.125rem -0.0313rem var(--cx-shadow-color, transparent), 0rem 0.0313rem 0.125rem -0.0313rem rgba(0, 0, 0, 0.1);`
`.shadow-default`	`--cx-shadow-color: oklch(from var(--cx-default) l c h / 0.2);`
`.shadow-alternate`	`--cx-shadow-color: oklch(from var(--cx-alternate) l c h / 0.2);`
`.shadow-primary`	`--cx-shadow-color: oklch(from var(--cx-primary) l c h / 0.2);`
`.shadow-secondary`	`--cx-shadow-color: oklch(from var(--cx-secondary) l c h / 0.2);`
`.shadow-neutral`	`--cx-shadow-color: oklch(from var(--cx-neutral) l c h / 0.2);`
`.shadow-warning`	`--cx-shadow-color: oklch(from var(--cx-warning) l c h / 0.2);`
`.shadow-success`	`--cx-shadow-color: oklch(from var(--cx-success) l c h / 0.2);`
`.shadow-danger`	`--cx-shadow-color: oklch(from var(--cx-danger) l c h / 0.2);`
`.shadow-info`	`--cx-shadow-color: oklch(from var(--cx-info) l c h / 0.2);`
`.shadow-black`	`--cx-shadow-color: oklch(from var(--cx-black) l c h / 0.2);`
`.shadow-white`	`--cx-shadow-color: oklch(from var(--cx-white) l c h / 0.2);`

Elevation shadows are created by design tokens using a special function. Instead of creating all color variants of shadow levels, function creates a transparent shadow on default shadow class and the shadow color utility changes that color, similar to opacities.

Sass variables

$box-shadow-medium:         $shadow-default-20;
$box-shadow-small:          $shadow-default-05;
$box-shadow-large:          $shadow-default-50;
$box-shadow-inset:          inset 0 .125rem .25rem #{to-opacity($black, .125)};
$box-shadow-emboss:         inset 0 .0625rem 0 #{to-opacity($white, .15)};
// $box-shadow:                $box-shadow-medium;

$shadow-default-95:         $cx-shadow-elevation-default-95;
$shadow-default-90:         $cx-shadow-elevation-default-90;
$shadow-default-80:         $cx-shadow-elevation-default-80;
$shadow-default-70:         $cx-shadow-elevation-default-70;
$shadow-default-60:         $cx-shadow-elevation-default-60;
$shadow-default-50:         $cx-shadow-elevation-default-50;
$shadow-default-40:         $cx-shadow-elevation-default-40;
$shadow-default-30:         $cx-shadow-elevation-default-30;
$shadow-default-20:         $cx-shadow-elevation-default-20;
$shadow-default-10:         $cx-shadow-elevation-default-10;
$shadow-default-05:         $cx-shadow-elevation-default-05;

Sass maps

$base-shadows: (
  null:         var(--box-shadow-medium),
  "small":      var(--box-shadow-small),
  "large":      var(--box-shadow-large),
  "inset":      var(--box-shadow-inset),
  "emboss":     var(--box-shadow-emboss),
  none:         none,
);

$default-shadows: (
  "95":         $shadow-default-95,
  "90":         $shadow-default-90,
  "80":         $shadow-default-80,
  "70":         $shadow-default-70,
  "60":         $shadow-default-60,
  "50":         $shadow-default-50,
  "40":         $shadow-default-40,
  "30":         $shadow-default-30,
  "20":         $shadow-default-20,
  "10":         $shadow-default-10,
  "05":         $shadow-default-05,
);

Sass utilities API

Shadow utilities are declared in the utilities API in scss/utilities/_index.css.scss. Learn how to use the utilities API.

"base-shadow": (
  property: box-shadow,
  class: shadow,
  values: $base-shadows
),

"elevation-shadow": (
  property: box-shadow,
  class: shadow,
  state: hover,
  enabled: $enable-elevation-shadows,
  values: map-loop($default-shadows, make-color-shadow, "$value")
),
"shadow-color": (
  property: --shadow-color,
  class: shadow,
  state: hover,
  enabled: $enable-elevation-shadows,
  values: map-loop($context-colors, make-shadow-color, "$key")
)