CSS 柔和多层弥散阴影生成器

组合多层 CSS box-shadow,调整模糊、偏移与颜色,生成柔和的阴影样式。

精选风格预设:
✨

物理多层漫反射

自然的真实世界光影呈现

4 层
24px
1.2x
8%
#141413
生成的 CSS 阴影代码
嵌入此工具到你的网站 / 博客 无需开发 · 复制即可使用
HTML 嵌入代码 (iframe):
<iframe src="https://lucentool.com/zh/shadow-generator" width="100%" height="650" style="border:1px solid #e5e0d8;border-radius:12px;max-width:850px;width:100%;" frameborder="0"></iframe>
<div style="font-size:12px;color:#78716c;margin-top:6px;font-family:sans-serif;">Powered by <a href="https://lucentool.com/zh/shadow-generator" target="_blank" style="color:#c85a32;text-decoration:none;">Lucentool - CSS 柔和多层弥散阴影生成器</a></div>

为什么单层 CSS box-shadow 看起来很“假”?

现实世界中的自然光源(如窗外的漫射日光或天花板筒灯)并不是一个无穷小的几何奇点,而是具有一定物理发光面积的面光源。阴影从物体底部延伸到远端时,会呈现出近端紧实深邃、远端柔和渐隐的高斯衰减效果。如果只写一层 `box-shadow: 0 10px 20px rgba(0,0,0,0.15)`,边缘会有非常突兀的脏灰色光晕,使卡片看起来像一块贴在背景上的死板纸片。

多层阴影衰减参数

Lucentool 采用现代物理渲染中的非线性幂函数衰减模型:通过将阴影拆解为 2 到 6 个互相叠加的微衰减层。底层提供紧贴物体边缘的环境光遮蔽(Ambient Occlusion),顶层提供大范围的柔和弥散,从而在任何屏幕上都呈现出媲美 Apple、Stripe、Linear 官方设计的高级通透空气感。

Tailwind CSS 深度兼容