Shadow

Utility classes for box-shadow. All values reference CSS custom properties (--shadow-*) set by the theme, so shadows adapt to your design tokens.

---

Available Classes

Class	CSS
shadow-xs	box-shadow: var(--shadow-xs)
shadow-sm	box-shadow: var(--shadow-sm)
shadow-md	box-shadow: var(--shadow-md)
shadow-lg	box-shadow: var(--shadow-lg)
shadow-xl	box-shadow: var(--shadow-xl)
shadow-2xl	box-shadow: var(--shadow-2xl)
shadow-inner	box-shadow: var(--shadow-inner)
shadow-none	box-shadow: none

Shadow Scale

<div class="flex flex-wrap gap-3">
  <div class="shadow-xs rounded-md p-4" style="background: var(--color-surface-raised); min-width: 100px; text-align: center">shadow-xs</div>
  <div class="shadow-sm rounded-md p-4" style="background: var(--color-surface-raised); min-width: 100px; text-align: center">shadow-sm</div>
  <div class="shadow-md rounded-md p-4" style="background: var(--color-surface-raised); min-width: 100px; text-align: center">shadow-md</div>
  <div class="shadow-lg rounded-md p-4" style="background: var(--color-surface-raised); min-width: 100px; text-align: center">shadow-lg</div>
  <div class="shadow-xl rounded-md p-4" style="background: var(--color-surface-raised); min-width: 100px; text-align: center">shadow-xl</div>
  <div class="shadow-2xl rounded-md p-4" style="background: var(--color-surface-raised); min-width: 100px; text-align: center">shadow-2xl</div>
</div>

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Inner & None

<div class="flex flex-wrap gap-3">
  <div class="shadow-inner rounded-md p-4" style="background: var(--color-surface); min-width: 140px; text-align: center">shadow-inner</div>
  <div class="shadow-none rounded-md p-4 border" style="min-width: 140px; text-align: center">shadow-none</div>
</div>

shadow-inner

shadow-none

Combined with Rounded & Transitions

<div class="flex flex-wrap gap-3">
  <div class="shadow-md rounded-lg p-4 transition-shadow" style="background: var(--color-surface-raised); min-width: 160px; text-align: center; cursor: pointer" onmouseover="this.className='shadow-xl rounded-lg p-4 transition-shadow'" onmouseout="this.className='shadow-md rounded-lg p-4 transition-shadow'">Hover me (md &rarr; xl)</div>
  <div class="shadow-lg rounded-full p-4" style="background: var(--color-surface-raised); width: 100px; height: 100px; display: flex; align-items: center; justify-content: center">Circle</div>
</div>

Hover me (md → xl)

Circle

---

Responsive Variants

All shadow classes support breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

<!-- No shadow on mobile, medium shadow from md up -->
<div class="md:shadow-md md:rounded-lg">Responsive card</div>

<!-- Subtle shadow on mobile, larger on desktop -->
<div class="shadow-sm lg:shadow-xl">Elevating card</div>

---

SCSS

@use '@grundtone/design-tokens/scss/lib' as gt;

.card {
  box-shadow: gt.shadow('md');
  border-radius: gt.radius('lg');
}