免费 CSS 工具
CSS 阴影生成器 - 可视化生成 box-shadow
调整偏移、模糊、扩散、透明度和 inset 模式，可视化生成可复制的 CSS box-shadow，适合按钮、卡片、弹窗和界面原型。
工具加载中...
快速答案
CSS 阴影生成器可以通过滑块调出 box-shadow 代码。
它适合快速设计卡片、按钮、弹窗、图片和 UI 组件的层次感。
适合输入
清晰输入
准备好要处理的阴影偏移、模糊、扩散和颜色，避免混入不相关内容。
确认目标
先确定要复制、换算、统计或生成的结果类型，减少来回调整。
本地复核
结果适合快速处理和初步判断，重要场景仍应按业务规则复核。
生成方式
工具会把偏移、模糊、扩散、颜色和 inset 选项组合成 box-shadow 声明。
x/y offset 控制方向。
blur 和 spread 控制柔和度和范围。
结果可复制到 CSS。
示例、假设和限制
工具结果适合快速估算、转换和整理；关键场景建议按业务规则复核。
示例
设置 y=8、blur=24、opacity=0.18，生成柔和卡片阴影。
假设
用户需要单层或轻量阴影，用于常规网页界面。
限制
复杂多层阴影、品牌设计系统和暗色主题仍需要设计复核。
常见使用场景
这些中文页面面向轻量、快速、浏览器本地完成的日常任务。
卡片设计
生成轻量层级阴影。
按钮状态
快速测试 hover 阴影。
弹窗
增强浮层区分。
原型
复制 CSS 到样式稿。
常见问题
可以生成 inset 阴影吗？
可以按页面选项开启 inset。
支持多层阴影吗？
具体以页面能力为准，常见场景可用单层开始。
代码会上传吗？
不会。生成在浏览器本地完成。
暗色模式需要不同阴影吗？
通常需要结合背景和对比度微调。
推荐流程
UI 样式流程
先生成阴影，再调色和检查对比度。