Shadows

Box shadow, text shadow, and drop shadow utilities with color integration. Use preset variables, inline shadow definitions, inset shadows, and stacked shadows.

Shadow Utilities

Use the utility that matches the CSS shadow behavior you need. Box shadows apply to an element box, text shadows apply to glyphs, and drop shadows follow the rendered alpha mask of images, icons, and SVGs.

Utility

Property

Use Case

bshadow-*

box-shadow

Cards, panels, buttons, and inset shadows.

tshadow-*

text-shadow

Readable text over images, glow effects, and labels.

dshadow-*

filter: drop-shadow()

Transparent images, SVGs, icons, and irregular shapes.

Syntax

Shadow values are written with underscores in place of spaces. Geometry parts define offset and blur for all types, while spread and inset keywords are specific to box shadows. Colors use Maple's color syntax, including tones and alpha values.

Pattern

Description

Example

Preset

Reads a shadow token from a CSS variable.

bshadow-lg

Inline

Defines offset, blur, and color in one class.

bshadow-0px_4px_12px_8px_black/15

Inset

Adds inset to a box shadow.

bshadow-0px_2px_4px_inset_gray

Composed

Combines a shadow shape variable with a color.

bshadow-sm_primary/10

Stacked

Combines multiple shadows with commas. All shadow types (preset, inline, inset, and composed) can be stacked.

bshadow-sm_primary/10,lg

Box Shadow

The bshadow-* utility maps to box-shadow. Use it for element elevation, inner borders, pressed states, and layered surfaces.

preset

inline

inset


<!-- Preset: Full shadow definition is included
     in the variable, but please note that Maple's color
     and number resolutions cannot be used here. -->
<div class="--shadow-lg=0px_4px_12px_aqua">
  <div class="bshadow-lg">preset</div>
</div>

<!-- Inline definition -->
<div class="bshadow-0px_4px_12px_aqua-500/80">inline</div>

<!-- Inset shadow -->
<div class="bshadow-0px_2px_4px_inset_aqua-500/80">inset</div>

Composed Shadows

Define variables like --shadow-sm=0_2px_4px or --bshadow-lg=0_16px_32px with only offset, blur, and spread. Then apply color per element with classes like bshadow-sm_primary-600/10. This approach is useful in design systems because each element can combine the same elevation with its own color and alpha.

sm_blue

lg_purple

stacked


<div class="--shadow-sm=0_2px_4px --shadow-lg=0_16px_32px">
  <!-- Shape variables composed with colors -->
  <div class="bshadow-sm_blue">Small</div>
  <div class="bshadow-lg_purple">Large</div>

  <!-- Multiple shadows -->
  <div class="bshadow-sm_blue,lg_purple">Stacked</div>
</div>

Text Shadow

The tshadow-* utility maps to text-shadow. It supports the same color syntax as box shadows but follows standard text-shadow geometry, which does not include spread or inset.

NEON


<div class="--tube=0_0_1px --glow=0_0_12px --cast=0_8px_72px">
  <div class="c-black tshadow-tube_white,glow_lime,cast_lime">NEON</div>
</div>

Drop Shadow

The dshadow-* utility maps to filter: drop-shadow(). Use it when the shadow should follow transparency instead of the element's rectangular box. Like text shadows, drop shadows do not support spread or inset.

bshadow-lg_lime

dshadow-lg_lime


<div class="--shadow-lg=0_12px_24px c-lime">
  <!-- Box Shadow -->
  <div class="bshadow-lg_lime">
    <svg viewBox="0 0 24 24" class="square-16" fill="currentColor">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
  </div>

  <!-- Drop Shadow -->
  <div class="dshadow-lg_lime">
    <svg viewBox="0 0 24 24" class="square-16" fill="currentColor">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
  </div>
</div>

Refer to the underlying CSS properties for granular shadow control.

box-shadow

text-shadow

filter