Shadow Utilities

Beautify supplements Tailwind's built-in shadows with additional CSS variables for common UI layers. Tailwind shadow-* classes work directly.

Notes

Beautify supplemental shadows

--shadow-base

base

--shadow-border

border (base + outline)

--shadow-border-inner

border-inner (inset + base)

--shadow-bubble

bubble (dialog/balloon)

--shadow-card

card

--shadow-desk

desk (highest)

Tailwind built-in shadow classes

shadow-sm

shadow-sm

shadow

shadow

shadow-md

shadow-md

shadow-lg

shadow-lg

shadow-xl

shadow-xl

shadow-2xl

shadow-2xl

shadow-inner

shadow-inner

shadow-none

shadow-none

Custom shadow colors (Tailwind v4)

shadow-lg shadow-blue-500/50

Blue shadow

shadow-lg shadow-red-500/40

Red shadow

shadow-lg shadow-green-500/40

Green shadow

Arbitrary value

Custom value

Ring utilities

ring (2px outline)

ring

ring-4

ring-4

ring-primary

ring ring-primary

ring-blue-500

ring ring-blue-500

ring-offset-2

ring ring-primary ring-offset-2

inset-ring

inset-ring

inset-ring-4

inset-ring-4

inset-ring-primary

inset-ring inset-ring-primary