在线免费CSS阴影生成器
可视化构建CSS盒阴影，调整偏移、模糊、扩展和颜色，一键复制代码。
Who uses the CSS阴影生成器?
- 为符合设计系统规范生成卡片和按钮阴影的 UI 开发者。
- 通过可视化、即时反馈的界面探索阴影属性的 CSS 学习者。
- 在交给开发者之前创建并测试阴影效果原型的设计师。
How the CSS阴影生成器 works
调整 X 偏移、Y 偏移、模糊半径和扩展半径滑块，塑造你想要的阴影效果。
点击色块选择阴影颜色，并使用旁边的透明度滑块。
开启 Inset 可获得内阴影效果。
从代码输出面板复制 CSS。
Tips & tricks
- 本工具每次输出一层阴影——如需 Material Design 层级阴影那样的多层效果，请在此分别生成每一层，再手动用逗号组合。
- 负扩展配合更大的模糊值会产生柔和、弥散的阴影，看起来比正扩展、紧凑的阴影更有“悬浮感”。
- 内阴影很适合表现按下状态——可以试试用小模糊值配合低透明度的深色。
- 透明度滑块控制的是阴影颜色的 alpha 通道，而不是元素本身的透明度。
Frequently Asked Questions
CSS box-shadow 的语法是什么？
box-shadow: [inset] X偏移 Y偏移 模糊半径 扩展半径 颜色。例如：box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)。多个阴影之间用逗号分隔。
扩展半径的作用是什么？
扩展半径会在模糊处理之前扩大或收缩阴影。正值会让阴影比元素本身更大；负值则会使其缩小。-4px 的扩展配合 8px 的模糊，能产生一种聚焦、有方向感的阴影。
什么是内阴影（inset）？
勾选 Inset 复选框会让阴影出现在元素边框内侧，而不是外侧。内阴影可用于制作按下/凹陷的按钮状态、内嵌卡片效果以及内发光效果。
这个工具能生成多层叠加的阴影吗，比如 Material Design 的层级阴影？
不能——本工具每次只生成一层阴影。要实现像 Material Design 层级阴影这样的多层效果（box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)），请在此分别生成每一层，然后手动用逗号组合各个值。
box-shadow 会影响布局、占用空间吗？
不会。与 margin 或 padding 不同，box-shadow 不会影响布局——带阴影的元素不会把相邻元素挤开。因此可以放心添加阴影，而不必担心打乱页面布局。
Is my data safe when using the CSS阴影生成器?
Completely safe. The CSS阴影生成器 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS阴影生成器 output in commercial projects?
Yes. The CSS阴影生成器 is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS阴影生成器 follow official standards?
Yes. The CSS阴影生成器 is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.