Blur 与 Spread 区别？

Blur 让阴影边缘柔化——渐变到透明的距离。Spread 在模糊前放大或缩小阴影形状本身（负值则内缩）。

什么时候用多图层？

自然阴影通常需要两层以上：近处深色一层 + 远处浅色一层。Material Design 与 Tailwind 默认阴影都是多层。

半透明色让背景透出，阴影更自然。rgba() 可直接设置 Alpha。

Tailwind 以空白分割类名，所以任意值用下划线代替空格。

颜色

可叠加任意数量的阴影图层，调整每层的偏移、模糊、扩散、颜色与 inset，实时预览即时更新。6 个预设（Soft、Medium、Large、Neumorphism、Inset、Glow）一键启用常见效果。输出可复制为 CSS 规则或 Tailwind 任意值类。

—

预设

阴影图层

预览

CSS

box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);

Tailwind

shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]

Blur 与 Spread 区别？: Blur 让阴影边缘柔化——渐变到透明的距离。Spread 在模糊前放大或缩小阴影形状本身（负值则内缩）。
什么时候用多图层？: 自然阴影通常需要两层以上：近处深色一层 + 远处浅色一层。Material Design 与 Tailwind 默认阴影都是多层。
为什么用 rgba() 而非 HEX？: 半透明色让背景透出，阴影更自然。rgba() 可直接设置 Alpha。
为什么 Tailwind 类里有下划线？: Tailwind 以空白分割类名，所以任意值用下划线代替空格。