UI 阴影级别生成器
设置阴影参数，查看递增的层级预览，并复制适用于界面的 CSS token。
调整控件以更新阴影级别。
仅供设计辅助：不保证可访问性或视觉质量。请在产品中检查这些 token。
使用步骤
如何使用
- 选择基础颜色、模糊、扩散、不透明度和级数。
- 查看叠加预览和生成的 token 声明。
- 复制 CSS，并结合真实表面、对比度和交互状态检查每级阴影。
视觉设计起点
生成器会逐级增加偏移、模糊和不透明度，生成多层 box-shadow。请结合自己的表面和组件继续调整。
本地生成，可复制
所有计算和预览都在此浏览器中完成，输出为可粘贴到样式表的 CSS 自定义属性。
仅供设计辅助
预览不保证可访问性、对比度、视觉质量或适用于所有显示器和背景。请在产品中测试，并为重要状态提供非阴影提示。
常见问题
你可能还想知道
级别如何递增？
每级都会增加垂直偏移、模糊和不透明度，作为一致层级系统的简单起点。
阴影本身能保证可访问性吗？
不能。阴影只是视觉设计辅助，不能替代无障碍验证。重要状态还应使用文字、边框、颜色或其他清晰提示。
输入会上传吗？
不会。预览和 CSS 都在此浏览器本地生成。