CSS box-shadow 生成器

CSS box-shadow 生成器: 用途

调整阴影的偏移、模糊、扩展、颜色和透明度，并立即看到效果。组合多层阴影可得到逼真的效果，还可以使用内阴影（inset）选项。

内置分层柔和、Material、悬浮、轮廓、新拟态和霓虹等现成模板。CSS 代码可直接复制，并已包含 border-radius。

使用方法

1. 选择模板，或从零开始。
2. 调整图层和颜色。
3. 复制 CSS。

使用场景

• 为卡片和按钮增加层次感。
• 制作新拟态和霓虹效果。
• 了解 box-shadow 的工作原理。

常见问题

如何做出柔和且逼真的阴影？

使用多层低透明度的阴影：一层短而清晰，另一层长而模糊。「分层柔和」模板已经这样做了。

什么是内阴影（inset）？

它是绘制在元素内部的阴影，让元素看起来像是凹陷下去。在图层中勾选“内阴影”选项即可。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具