Box Shadows

Shadow tokens used across the application. Click to copy code.

Box Shadow Tokens

shadow-elevation-1

0 2px 4px 0 rgba(0,0,0,0.04), 0 1px 1px 0 rgba(0,0,0,0.02)

Shadow Preview

Tailwind Class:

<div class="shadow-elevation-1">...</div>

CSS:

box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04), 0 1px 1px 0 rgba(0,0,0,0.02);

shadow-elevation-2

0 1px 4px 0 rgba(0,0,0,0.04), 0 4px 10px 0 rgba(0,0,0,0.08)

Shadow Preview

Tailwind Class:

<div class="shadow-elevation-2">...</div>

CSS:

box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04), 0 4px 10px 0 rgba(0,0,0,0.08);

shadow-elevation-3

0 2px 20px 0 rgba(0,0,0,0.04), 0 8px 32px 0 rgba(0,0,0,0.08)

Shadow Preview

Tailwind Class:

<div class="shadow-elevation-3">...</div>

CSS:

box-shadow: 0 2px 20px 0 rgba(0,0,0,0.04), 0 8px 32px 0 rgba(0,0,0,0.08);

shadow-elevation-4

0 8px 20px 0 rgba(0,0,0,0.06), 0 24px 60px 0 rgba(0,0,0,0.12)

Shadow Preview

Tailwind Class:

<div class="shadow-elevation-4">...</div>

CSS:

box-shadow: 0 8px 20px 0 rgba(0,0,0,0.06), 0 24px 60px 0 rgba(0,0,0,0.12);

Usage Examples

elevation-1: Card

Subtle shadow for cards and containers

Card Title

This is a card with elevation-1 shadow for subtle depth.

HTML Code:

<div class="shadow-elevation-1 bg-bg-surface rounded-lg p-6">
  <h3 class="text-title text-text-neutral font-semibold">
    Card Title
  </h3>
  <p class="text-body text-text-subtle">
    This is a card with elevation-1 shadow.
  </p>
</div>

elevation-2: Button

Medium shadow for interactive elements

HTML Code:

<button class="shadow-elevation-2 bg-bg-action-primary 
        text-text-onActionPrimary px-6 py-3 rounded-lg 
        font-medium">
  Primary Button
</button>

elevation-3: Modal

Strong shadow for modals and popovers

Modal Header

This is a modal with elevation-3 shadow.

HTML Code:

<div class="shadow-elevation-3 bg-bg-surface rounded-xl p-6 max-w-sm">
  <h3 class="text-title text-text-neutral font-semibold mb-4">
    Modal Header
  </h3>
  <p class="text-body text-text-subtle mb-4">
    This is a modal with elevation-3 shadow.
  </p>
  <button class="bg-bg-action-secondary text-text-onActionPrimary px-4 py-2 rounded">
    Confirm
  </button>
</div>

elevation-4: Floating Panel

Maximum shadow for floating elements

Notification

Just now

You have a new message with elevation-4 shadow.

HTML Code:

<div class="shadow-elevation-4 bg-bg-surface rounded-xl p-5 max-w-xs">
  <div class="flex items-center gap-3 mb-3">
    <div class="w-10 h-10 bg-bg-accent rounded-full"></div>
    <div>
      <div class="text-sm text-text-neutral font-semibold">
        Notification
      </div>
      <div class="text-xs text-text-subtle">Just now</div>
    </div>
  </div>
  <p class="text-sm text-text-neutral">
    You have a new message.
  </p>
</div>

Elevation Comparison

shadow-elevation-1

Preview

shadow-elevation-2

Preview

shadow-elevation-3

Preview

shadow-elevation-4

Preview