CSS 阴影生成器
可视化调节 box-shadow 参数，实时预览效果并复制 CSS 代码
所有处理在浏览器本地完成,文件不上传
水平偏移4px
垂直偏移4px
模糊半径12px
扩展半径0px
透明度20%
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);常见问题
生成的 box-shadow 代码能直接用于生产吗?
可以。生成的 CSS 代码符合 W3C 标准,全浏览器兼容(IE9+、所有现代浏览器),可直接粘贴到 .css 文件、style 属性或 styled-components 内。
支持多层阴影叠加吗?
支持。可以叠加任意层阴影(用逗号分隔),每层独立调整颜色、模糊半径、扩散、X/Y 偏移,以及是否内阴影(inset)。适合做玻璃拟态、立体按钮等高级效果。
生成的阴影效果在深色模式下不明显怎么办?
深色背景下黑色阴影对比度低,建议改用低透明度白色阴影(如 `rgba(255,255,255,0.1)`)模拟「光晕」,或用饱和度较低的彩色阴影(品牌色减透明度)保留立体感。