Effects

Box Shadow

Utilities for controlling the box shadow of an element.

Quick reference

Class	Description
shadow-s	box-shadow: var(--w-shadow-s)
shadow-m	box-shadow: var(--w-shadow-m)
shadow-l	box-shadow: var(--w-shadow-l)
shadow-xl	box-shadow: var(--w-shadow-xl)

Basic usage

Adding an outer shadow

Use the shadow-s, shadow-m, shadow-l, shadow-xl utilities to apply different sized outer box shadows to an element.

s

m

l

xl

<div class="shadow-s ...">s</div>
<div class="shadow-m ...">m</div>
<div class="shadow-l ...">l</div>
<div class="shadow-xl ...">xl</div>

Arbitrary values

If you need to use a one-off box-shadow value, use square brackets to generate a property on the fly using any arbitrary value.

<div class="shadow-[--any-css-var]"></div>
<div class="shadow-[var(--any-css-var)]"></div>
<div class="shadow-[10px_5px_5px_red]"></div>

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:shadow-m to apply the shadow-m utility at only medium screen sizes and above.

<div class="shadow-s md:shadow-m"></div>