Shadow Library

Shadow Collection

Curated box-shadow presets from soft to hard, colorful to glowing. Copy CSS or Tailwind code with one click.

Soft Small

subtle, card, minimal

0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)

Soft Medium

card, panel, clean

0 4px 12px rgba(0,0,0,0.08)

Soft Large

modal, dropdown, floating

0 8px 30px rgba(0,0,0,0.08)

Soft Extra Large

hero, showcase, dramatic

0 20px 60px rgba(0,0,0,0.1)

Medium Small

button, badge, chip

0 2px 8px rgba(0,0,0,0.15)

Medium

card, panel, general

0 4px 16px rgba(0,0,0,0.15)

Medium Large

modal, popover, overlay

0 10px 40px rgba(0,0,0,0.15)

Hard Small

brutalist, retro, bold

2px 2px 0 rgba(0,0,0,1)

Hard Medium

brutalist, neo-brutalist, graphic

4px 4px 0 rgba(0,0,0,1)

Hard Large

brutalist, poster, statement

8px 8px 0 rgba(0,0,0,1)

Hard Colored

brutalist, playful, accent

4px 4px 0 #5e6ad2

Pink Glow

dopamine, vibrant, cta

0 8px 30px rgba(255,0,110,0.35)

Purple Glow

creative, premium, cta

0 8px 30px rgba(131,56,236,0.35)

Blue Glow

tech, trust, professional

0 8px 30px rgba(58,134,255,0.35)

Green Glow

success, nature, fresh

0 8px 30px rgba(6,214,160,0.35)

Orange Glow

warm, energetic, attention

0 8px 30px rgba(251,86,7,0.35)

Neon Cyan

cyberpunk, neon, dark-mode

0 0 15px rgba(0,255,255,0.4), 0 0 30px rgba(0,255,255,0.2)

Neon Magenta

cyberpunk, neon, synthwave

0 0 15px rgba(255,0,255,0.4), 0 0 30px rgba(255,0,255,0.2)

White Glow

ethereal, glass, dark-mode

0 0 20px rgba(255,255,255,0.25), 0 0 40px rgba(255,255,255,0.1)

Gold Glow

luxury, premium, art-deco

0 0 20px rgba(255,215,0,0.3), 0 0 40px rgba(255,215,0,0.15)

Inner Small

input, pressed, recessed

inset 0 2px 4px rgba(0,0,0,0.1)

Inner Medium

well, container, depth

inset 0 4px 8px rgba(0,0,0,0.15)

Neumorphism Inner

neumorphism, soft-ui, pressed

inset 5px 5px 10px rgba(0,0,0,0.08), inset -5px -5px 10px rgba(255,255,255,0.8)

Realistic Layered

realistic, material, depth

0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.06), 0 4px 4px rgba(0,0,0,0.04), 0 8px 8px rgba(0,0,0,0.02)

Material Elevation

material, elevation, card

0 3px 5px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.08)

Dreamy Float

dreamy, floating, premium

0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.08)

Neumorphism

neumorphism, soft-ui, raised

8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.8)

Smooth Low

smooth, natural, card

0 1px 1.5px rgba(28,25,60,0.07), 0 2.7px 4px rgba(28,25,60,0.05), 0 6.5px 10px rgba(28,25,60,0.04), 0 12px 18px rgba(28,25,60,0.03)

Smooth Medium

smooth, floating, modal

0 1px 1.5px rgba(28,25,60,0.06), 0 3px 4px rgba(28,25,60,0.05), 0 7px 10px rgba(28,25,60,0.04), 0 14px 20px rgba(28,25,60,0.035), 0 24px 36px rgba(28,25,60,0.03)

Smooth High

smooth, dramatic, hero

0 1.4px 2px rgba(28,25,60,0.06), 0 3.5px 5px rgba(28,25,60,0.05), 0 8px 11px rgba(28,25,60,0.045), 0 15px 22px rgba(28,25,60,0.04), 0 28px 40px rgba(28,25,60,0.035), 0 50px 70px rgba(28,25,60,0.03)

Elevation 1

material, card, resting

0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12)

Elevation 2

material, button, raised

0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)

Elevation 3

material, card, active

0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 1px 8px 0 rgba(0,0,0,0.12)

Elevation 4

material, appbar, snackbar

0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)

Elevation 5

material, fab, dialog

0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12)

Smooth Blue

brand, smooth, primary

0 2px 4px rgba(37,99,235,0.1), 0 6px 12px rgba(37,99,235,0.12), 0 12px 24px rgba(37,99,235,0.14)

Smooth Purple

brand, smooth, accent

0 2px 4px rgba(139,92,246,0.1), 0 6px 12px rgba(139,92,246,0.12), 0 12px 24px rgba(139,92,246,0.14)