Box Shadow 生成器
在线 Box Shadow 生成器，支持实时预览阴影参数并复制 CSS 代码。
CSS 代码
box-shadow: 16px 16px 24px 0px rgba(9, 9, 11, 0.24);
使用说明
- 1 调整偏移、模糊、扩散和透明度参数
- 2 实时查看阴影预览效果
- 3 复制生成的 CSS 代码
相关工具
条形码生成
在线条形码生成工具，支持CODE128和EAN-13格式，生成高质量条形码图片
颜色工具/拾色器
在线颜色拾取工具，支持HEX、RGB、HSL多格式互转，实时预览颜色效果
WCAG 颜色对比度检测
实时计算前景色与背景色的 WCAG 对比度比值，标注 AA / AAA 通过状态，并以按钮、卡片、输入框组件预览效果。支持导出 CSS 变量。
CSS 渐变生成器
在线 CSS 渐变生成器，支持线性渐变预览、角度调节和 CSS 代码复制。
Favicon 生成器
在线 Favicon 生成器，支持上传图像后生成多尺寸网站图标并下载 PNG 文件。
在线白板/画板
在线白板画板工具，支持画笔、橡皮擦、颜色选择、笔刷粗细调节，可导出为PNG。
二维码识别/解码
上传二维码图片，自动识别并解码出文本内容，先看内容再决定是否访问，避免扫到恶意链接。
二维码生成
输入文本或链接，即时生成QR二维码图片，可下载PNG
关于此工具
Box Shadow 生成器通过滑块和颜色选择器可视化调节阴影的水平偏移（X）、垂直偏移（Y）、模糊半径（blur）、扩散半径（spread）和颜色（含透明度），实时预览效果并生成标准 CSS box-shadow 属性代码。
适用场景：为卡片、按钮、弹窗组件设计层次感阴影效果、实现 Material Design 或 Neumorphism 风格的立体感、在 Figma 设计稿还原 CSS 时精确对应投影参数，以及在设计系统中定义统一的阴影规范（Elevation 层级）。
box-shadow 的 5 个参数之间相互影响，手写代码时很难凭直觉预判最终效果。通过可视化工具调整，前端工程师可以在几秒内找到合适的阴影参数，大幅减少设计还原阶段的沟通成本。
常见问题
box-shadow 各参数的含义分别是什么？ +
语法为：box-shadow: X偏移 Y偏移 模糊半径 扩散半径 颜色 [inset]。X/Y 控制阴影偏移方向，正值分别向右/向下；模糊半径越大阴影越柔和（0 为实心）；扩散半径正值放大阴影，负值收缩；inset 关键词将阴影改为内阴影。
如何实现多层叠加阴影？ +
box-shadow 支持多值，用逗号分隔：box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05); 叠加多层不同扩散程度的阴影可以模拟真实光影效果。Google Material Design 的各层级 Elevation 阴影就是通过 2-3 层叠加实现的。
内阴影（inset）有什么用？ +
inset 将阴影渲染在元素内部而非外部，常用于制作凹陷效果（如按压状态的按钮）、模拟凹槽输入框边框发光效果、以及 Neumorphism 设计风格中模拟物理曲面的光照感。内外阴影可以同时叠加使用。
为什么设计稿中的阴影效果在代码里看起来不一样？ +
Figma 和 Sketch 的投影（Drop Shadow）参数与 CSS box-shadow 含义略有差异。Figma 的 Spread（扩散）对应 CSS 第四个值；Figma 的角度需要换算为 X/Y 偏移（X = cos(angle) × distance，Y = sin(angle) × distance）；透明度需从百分比换算为 rgba 小数。
box-shadow 对性能有影响吗？ +
box-shadow 会触发浏览器绘制（Paint），对大量元素同时使用复杂阴影（尤其是多层叠加+大模糊半径）时，滚动和动画性能可能下降。对性能敏感的场景，建议改用 filter: drop-shadow() 或用绝对定位的伪元素模拟阴影，后两者可利用 GPU 合成层加速。