CSS 阴影生成器
box-shadow 可视化生成工具,支持多层阴影叠加与实时预览。
阴影层(1)
#1 外 0,10,15,-3
使用说明
功能介绍
CSS 阴影生成器是一个 box-shadow 可视化工具,支持多层阴影叠加。通过滑块调节偏移、模糊、扩散、透明度等参数,颜色支持透明度(rgba 格式),可切换内阴影,并提供实时预览与 CSS 代码输出。
操作步骤
在预览区查看阴影效果,点击「添加层」可新增阴影层并独立配置参数,点击层标签切换编辑目标,使用滑块调节偏移、模糊、扩散与透明度,通过色块选择器设置颜色,开关内阴影,切换预览背景查看不同场景下的效果,最后复制生成的 CSS 代码使用。
注意事项
至少保留一层阴影,无法删除最后一层;颜色使用 HEX 格式输入,输出自动转换为 rgba 以支持透明度;模糊半径不可为负值;多层阴影在 CSS 中以逗号分隔,渲染顺序从前往后叠加。