阴影库

阴影集合

精选 box-shadow 预设，从柔和到硬朗、彩色到辉光。一键复制 CSS 或 Tailwind 代码。

柔和小

subtle, card, minimal

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

柔和中

card, panel, clean

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

柔和大

modal, dropdown, floating

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

柔和超大

hero, showcase, dramatic

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

中等小

button, badge, chip

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

中等

card, panel, general

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

中等大

modal, popover, overlay

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

硬朗小

brutalist, retro, bold

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

硬朗中

brutalist, neo-brutalist, graphic

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

硬朗大

brutalist, poster, statement

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

硬朗彩色

brutalist, playful, accent

4px 4px 0 #5e6ad2

粉色光晕

dopamine, vibrant, cta

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

紫色光晕

creative, premium, cta

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

蓝色光晕

tech, trust, professional

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

绿色光晕

success, nature, fresh

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

橙色光晕

warm, energetic, attention

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

霓虹青

cyberpunk, neon, dark-mode

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

霓虹品红

cyberpunk, neon, synthwave

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

白色辉光

ethereal, glass, dark-mode

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

金色辉光

luxury, premium, art-deco

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

内阴影小

input, pressed, recessed

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

内阴影中

well, container, depth

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

新拟态内凹

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, 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 抬升

material, elevation, card

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

梦幻悬浮

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, soft-ui, raised

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

平滑·低

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, 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, 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)

层级 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)

层级 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)

层级 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)

层级 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)

层级 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)

平滑·蓝

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)

平滑·紫

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)

阴影库