CSS 阴影生成器

多层 box-shadow 可视化调参,圆角、背景一起调,复制就是最终代码

预览

卡片
16px

常用预设

阴影怎么写才像真的

一层阴影永远显得平。真实光照是软的、有方向的,所以常用做法是两层:一层小而深、负责贴边的接触阴影,一层大而淡、负责整体高度感。两层偏移方向一致,模糊半径差 3–4 倍,看起来就自然。

扩散半径(spread)为负会让阴影缩在元素里,做出「浮起」的效果;内阴影(inset)则相反,用来做凹陷、输入框和按压态。颜色别用纯黑,取品牌色的深色版本、透明度 8%–18%,比 rgba(0,0,0,.25) 高级得多。