Effects

Box Shadow Color

Utilities for sets the shadow color to an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class
shadow-md-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
shadow-lg-shade-`{palette}`-`{modifier}`
shadow-xl-shade-`{palette}`-`{modifier}`
shadow-xl-shade-`{palette}`-`{modifier}`

class
shadow-md-tone-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
shadow-lg-tone-`{palette}`-`{modifier}`
shadow-xl-tone-`{palette}`-`{modifier}`
shadow-xl-tone-`{palette}`-`{modifier}`

class
shadow-md-tint-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
shadow-lg-tint-`{palette}`-`{modifier}`
shadow-xl-tint-`{palette}`-`{modifier}`
shadow-xl-tint-`{palette}`-`{modifier}`

Usage

<div class="shadow-lg-shade-lava-1 ... bg-white ... width-32 height-32">
  ...
</div>

HTML

.dummy {
  @extend
    .shadow-lg-shade-lava-1,
    .bg-white,
    .width-32,
    .height-32;
}

SCSS

Set auto dark theme enabled to an element with added (dark) prefix.

<!-- parent -->
<div class="shadow-lg-shade-lava-1 ... (dark)shadow-lg-shade-amber-1 ... bg-white ... width-32 height-32">
  ...
</div>

HTML

.dummy {
  @extend
    .shadow-lg-shade-lava-1,
    .\(dark\)shadow-lg-shade-amber-1,
    .bg-white,
    .width-32,
    .height-32;
}

SCSS

Use (expand) variant to apply box shadow color to all child elements.

<!-- parent -->
<div class="(expand)shadow-lg-shade-lava-1">
  <!-- child -->
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
</div>

HTML

.dummy {
  @extend
    .(expand)shadow-lg-shade-lava-1;

SCSS