多层柔和 CSS 阴影生成工具

100% 纯前端贝塞尔多层光影计算 · 零数据上传 · 极客视觉设计工具

抛弃生硬的单层阴影，模拟 1 到 6 层阶梯递进的自然弥散物理阴影，支持原生 CSS 与 Tailwind 配置一键导出。

光影风格预设：

弥散层数 (Layers)： 4 层

垂直投影距离 (Vertical Offset)： 30 px

水平投影角度 (Horizontal Offset)： 0 px

最大羽化模糊 (Max Blur)： 60 px

扩展收缩 (Spread)： -10 px

阴影透明度 (Opacity)： 12 %

阴影色调：

#0f172a

卡片底色：

#ffffff

✨

Elevation 3

Layered Smooth Shadow

Pure CSS Box-Shadow 100% Client-Side

box-shadow: ...;

💡

1 告别生硬边缘

单层 CSS box-shadow 产生的是线性均匀模糊，现实物理世界中的漫反射光在边界处具有自然的指数级衰减。

2 多层贝塞尔幂次计算

本工具利用数学插值将总投影分解为 1 到 6 层微小递进分量，让底部靠近卡片处坚实、远端边缘平滑消散。

3 一键对接现代前端

不仅提供原生 CSS 语句，还自动生成 Tailwind CSS 自定义类名配置，无缝粘贴至项目配置文件即刻生效。

❓

Q: 多层阴影对网页渲染性能有影响吗？

几乎没有影响。现代浏览器对 box-shadow 均有 GPU 合成硬件加速，本工具生成的 3~5 层阴影已在各大主流生产级设计系统（如 Stripe、Linear）中广泛成熟应用。

Q: 为什么生成的扩展值（Spread）通常为负数？

轻微的负向 Spread 值能够防止阴影从卡片左右两侧过分鼓起侧漏，让主投影聚焦于垂直下方，视觉上更加高级精致。