CSS阴影生成器在线 - 免费box-shadow/text-shadow代码生成
拖拽滑块调节偏移、模糊、扩散与颜色，生成 box-shadow 代码。
什么是CSS 阴影生成？
box-shadow 是 CSS 中为元素添加阴影的属性，由水平偏移、垂直偏移、模糊半径、扩散半径和颜色五部分组成，可选 inset 让阴影向内投射。合理的阴影能显著提升页面的层次感与质感。
Yeo工具箱的 CSS 阴影生成器通过滑块可视化调节阴影参数，实时预览效果并生成标准 CSS 代码，方便开发者快速调整卡片、按钮、弹窗等元素的立体表现。
如何使用Yeo工具箱的CSS 阴影生成？
- 调节 X/Y 偏移量滑块
- 调节模糊半径与扩散半径
- 选择阴影颜色，可勾选 inset 内阴影
- 预览区实时显示效果，一键复制 CSS 代码
常见使用场景
- 场景1：卡片与弹窗的悬浮阴影
- 场景2：按钮按下态的内阴影反馈
- 场景3：产品截图与设计稿快速出 CSS
- 场景4：输入框聚焦的柔和阴影
使用小贴士
- 颜色选择器支持 8 位 HEX（如 #00000033），可调整阴影透明度
- 多层阴影可用逗号分隔组合，营造更真实的投影效果
常见问题
Q1: box-shadow 的四个数值代表什么？
依次是水平偏移、垂直偏移、模糊半径、扩散半径。偏移控制阴影方向，模糊控制柔和程度，扩散控制阴影大小（正值变大、负值变小）。
Q2: inset 是什么意思？
inset 让阴影从元素边缘向内投射，形成内阴影效果，常用于凹陷按钮、输入框和卡片内边界的立体感。
Q3: 阴影会影响性能吗？
大量大范围模糊阴影会增加渲染开销，移动端尤其明显。建议用较小的模糊半径，或用伪元素模拟阴影以减少重绘。
更新日志
- 2026-08-04 更新：Yeo工具箱 CSS 阴影生成工具正式上线
⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。