CSS阴影生成器

什么是CSS阴影生成器？

如何使用CSS阴影生成器

1. 1

   调节参数：拖动界面对应滑块，依次调整阴影的X轴偏移、Y轴偏移、模糊半径和扩散半径数值，调整过程中画布会同步更新阴影效果

2. 2

   设置颜色：点击颜色面板打开拾色器，挑选你需要的阴影主色，再拖动不透明度滑块调整阴影的通透程度

3. 3

   添加阴影：如果需要制作多层叠加的阴影效果，点击界面的「新增阴影层」按钮，即可为每个阴影层单独设置不同参数

4. 4

   复制代码：预览框确认阴影效果符合你的预期后，点击代码区域的一键复制按钮，就能把生成好的完整CSS代码复制出来

什么场景会用到？

计算示例

注意事项

• X偏移、Y偏移支持输入负值，负值代表阴影向左/向上偏移，不要混淆正负值对应的偏移方向。
• 扩展半径用于扩大阴影整体大小，若设置为负值会缩小阴影范围，超出元素边界的部分会被裁切。
• RGBA格式的不透明度仅支持0到1之间的数值，超过范围会被CSS自动截断为1，生成无效效果。
• 内阴影的偏移方向逻辑和外阴影一致，不要混淆内阴影的位置显示效果。

常见问题

参考资料

• MDN Web Docs 的 box-shadow 文档
• W3C CSS Backgrounds and Borders Module Level 3 规范

本页遵循W3C官方CSS box-shadow语法规范，生成的代码可直接复制使用，所有示例结果均经过程序复算验证，由工具集编辑组维护更新。