CSS 阴影生成器
免费线上 CSS 阴影生成器。即时预览制作复杂的多层阴影。可自订位移、模糊、扩散、颜色与内阴影属性。
使用可视化编辑器设计多层 CSS box-shadow 阴影效果，自定义偏移、模糊、扩散与色彩，打造卡片与按钮立体感。
CSS 阴影生成器
免费线上 CSS 阴影生成器。即时预览制作复杂的多层阴影。可自订位移、模糊、扩散、颜色与内阴影属性。
关于这个工具
使用可视化编辑器设计多层 CSS box-shadow 阴影效果，自定义偏移、模糊、扩散与色彩，打造卡片与按钮立体感。
阴影设定
区块设定
背景颜色
区块颜色
阴影设定
图层 1
阴影颜色
水平位移 (X) (10px)
垂直位移 (Y) (10px)
模糊半径 (5px)
扩散半径 (0px)
结果将显示于此...
预览
CSS 代码
阴影设定
区块设定
背景颜色
区块颜色
阴影设定
图层 1
阴影颜色
水平位移 (X) (10px)
垂直位移 (Y) (10px)
模糊半径 (5px)
扩散半径 (0px)
常见问题
关于这个主题的常见疑问与实用解答。
可以自定义哪些属性？
您可以自定义水平与垂直偏移、模糊半径、扩散半径、阴影颜色，以及切换内阴影模式。
可以添加多层阴影吗？
可以，可叠加多层阴影以营造复杂的立体效果。每层都可以有独立的偏移、模糊、扩散与颜色设定。
生成的代码跨浏览器兼容吗？
是的，标准 CSS box-shadow 属性无需厂商前缀即可在所有现代浏览器中运行。
我的数据会被发送到服务器吗？
不会，box-shadow CSS 生成完全在您的浏览器中执行。您的阴影设置通过 JavaScript 在本地处理，绝不会离开您的设备。