可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见阴影样式
box-shadow: 0px 18px 42px -12px rgba(15, 23, 42, 0.28);
生成的阴影是视觉起点。发布前请在最终背景、主题、信息密度和设备类型上检查。
CSS 阴影生成器可以通过滑块调出 box-shadow 代码。
它适合快速设计卡片、按钮、弹窗、图片和 UI 组件的层次感。
清晰输入
准备好要处理的阴影偏移、模糊、扩散和颜色，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
设置 y=8、blur=24、opacity=0.18，生成柔和卡片阴影。
假设
用户需要单层或轻量阴影，用于常规网页界面。
限制
复杂多层阴影、品牌设计系统和暗色主题仍需要设计复核。
先判断层级用途
卡片、弹窗、下拉菜单和浮动按钮需要的阴影强度不同，不要一套阴影用到底。
浅背景和深背景分开调
同一 box-shadow 在白底、灰底和深色主题里的效果会明显不同。
检查移动端性能和观感
过多大范围模糊阴影会让界面显脏，也可能增加移动端绘制压力。
适合建立 UI 层级
轻阴影可用于卡片，较强阴影适合弹层和菜单，过重阴影会让页面显得拥挤。
不要用阴影替代边框
列表、表格和密集工具界面里，边框或背景层级有时比阴影更清楚。
深色主题需要单独调整
深色背景里的阴影不明显，可能需要改用高光、边框或透明背景层。
卡片设计
生成轻量层级阴影。
按钮状态
快速测试 hover 阴影。
弹窗
增强浮层区分。
原型
复制 CSS 到样式稿。
可以生成 inset 阴影吗？
可以按页面选项开启 inset。
支持多层阴影吗？
具体以页面能力为准，常见场景可用单层开始。
代码会上传吗？
不会。生成在浏览器本地完成。
暗色模式需要不同阴影吗？
通常需要结合背景和对比度微调。
box-shadow 参数分别代表什么？
常见顺序是水平偏移、垂直偏移、模糊半径、扩散半径和颜色。不同参数控制方向、柔和度和面积。
为什么阴影在深色主题里不明显？
深色背景本身接近阴影颜色，黑色阴影对比不足，可能需要改用边框、高光或更透明的层级。
可以生成 inset 阴影吗？
可以按页面选项开启 inset。
支持多层阴影吗？
具体以页面能力为准，常见场景可用单层开始。
代码会上传吗？
不会。生成在浏览器本地完成。
暗色模式需要不同阴影吗？
通常需要结合背景和对比度微调。
box-shadow 参数分别代表什么？
常见顺序是水平偏移、垂直偏移、模糊半径、扩散半径和颜色。不同参数控制方向、柔和度和面积。
为什么阴影在深色主题里不明显？
深色背景本身接近阴影颜色，黑色阴影对比不足，可能需要改用边框、高光或更透明的层级。
推荐流程
UI 样式流程
先生成阴影，再调色和检查对比度。