Effects

Box Shadow Color

Utilities for sets the shadow color to an element.

Variant

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

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