Shadows

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

Examples

While shadows on components are disabled by default in Chassis CSS and can be enabled via $enable-component-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

No shadow

Small shadow

Medium shadow

Large shadow

Inset shadow

html

<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 bg-evident rounded p-medium">Inset shadow</div>

Elevations

Elevations from design tokens can be used with their 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

Using CSS variables for shadow utilities allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our .shadow-50 utility.

.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);
}

During creation of our shadow utilities, a --cx-shadow-color variable with transparent value also defined in the class. Our create-color-shadow function creates another shadow value according to design token, with var(--cx-shadow-color, transparent) color. Then shadow-primary class sets the --cx-shadow-color variable using CSS relative color syntax derived from --cx-primary and $shadow-color-opacity. Now the transparent shadow gets activated and adds a slight primary color to the shadow, similar in the design tokens.

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.

Examples

It is possible to apply context color to shadows by adding shadow-* classes.

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

Add -hover at the end of the class name.

This is a hover shadow.

This is a shadow with primary hover.

html

<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

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

scss/_variables.scss

$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:                $box-shadow-medium;
$shadow-color-opacity:      .2;

scss/tokens/_shadows.scss

$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

scss/maps/_shadows.scss

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

scss/maps/_shadows.scss

$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 our utilities API in scss/utilities/_index.css.scss. Learn how to use the utilities API.

scss/utilities/_index.scss

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

scss/utilities/_index.scss

"elevation-shadow": (
  property: box-shadow,
  class: shadow,
  state: hover,
  values: map-loop($default-shadows, make-color-shadow, "$value")
),
"shadow-color": (
  css-var: true,
  css-variable-name: shadow-color,
  class: shadow,
  state: hover,
  values: map-loop($context-colors, make-shadow-color, "$key")
)