CSS 阴影生成器
免费线上 CSS 阴影生成器。即时预览制作复杂的多层阴影。可自订位移、模糊、扩散、颜色与内阴影属性。
CSS 阴影生成器
免费线上 CSS 阴影生成器。即时预览制作复杂的多层阴影。可自订位移、模糊、扩散、颜色与内阴影属性。
关于 CSS 阴影
建立逗号分隔的多层阴影
每个图层都会变成一段 box-shadow 值，包含可选的 inset、水平偏移、垂直偏移、模糊半径、扩散半径与颜色。多个图层会合并在同一个声明中，符合标准 CSS box-shadow 语法。
区块颜色只是预览设置
背景与区块颜色用来检查阴影在浅色或有色表面上的效果。它们不会被放进复制片段，输出只包含生成的 box-shadow 声明。
模糊柔化边缘，扩散改变大小
固定位置、颜色与扩散，将模糊从 0 调到 20 px，可看到清晰边缘变成柔和过渡。再把模糊归零，将扩散从 0 调到 10 px：阴影会向四周变大，边缘仍然清晰。CSS 先应用扩散再模糊，因此要调整阴影范围时改扩散，要柔化边缘时改模糊。
用负扩散收窄外阴影
关闭内阴影，将水平位置设为 0、垂直位置设为 12 px、模糊设为 16 px，再比较扩散 0 与 -8 px。负扩散会先缩小阴影再模糊；配合向下偏移，更多阴影藏在区块后方，效果便集中在下缘，但不保证其他三边完全没有阴影。负值过大可能让阴影消失；内阴影开关则是把效果改到区块内侧。
同类阴影中，第一层画在最上方
多层外阴影重叠时，逗号列表中的第一段会画在最上方。本工具按画面顺序输出图层，新增图层接在最后。可把第一层设成较小、清晰的阴影，第二层设成较宽、柔和的阴影；若第二层不明显，试着降低第一层的不透明度或扩散。内阴影画在区块背景上方，外阴影画在区块后方，列表顺序不会把外阴影变成内阴影。
常见问题
关于这个主题的常见疑问与实用解答。
可以自定义哪些属性？
您可以自定义水平与垂直偏移、模糊半径、扩散半径、阴影颜色，以及切换内阴影模式。
可以添加多层阴影吗？
可以，可叠加多层阴影以营造复杂的立体效果。每层都可以有独立的偏移、模糊、扩散与颜色设定。
生成的代码跨浏览器兼容吗？
是的，标准 CSS box-shadow 属性无需厂商前缀即可在所有现代浏览器中运行。
我的数据会被发送到服务器吗？
不会，box-shadow CSS 生成完全在您的浏览器中执行。您的阴影设置通过 JavaScript 在本地处理，绝不会离开您的设备。