写 CSS 阴影，偏移、模糊、扩展每个值都要调——手写半天出不来想要的效果。

「阴影生成器」可视化拖拽调节六项参数，实时预览，CSS 代码一键复制，阴影效果所见即所得。

🌐 在线使用：https://tools.1024vip.cn/tools/box-shadow (opens new window)

适合哪些场景

• 卡片阴影：给 UI 卡片加层次感，拖拽比手写快得多
• 按钮悬浮效果：hover 态阴影，实时调参立刻看效果
• 多层阴影：同时添加多个阴影层，创造精致效果
• 学习 box-shadow：边调边看生成的代码，理解语法更快

功能说明

• 六项参数可视化：X 偏移、Y 偏移、模糊半径、扩展半径、颜色、是否内阴影
• 多阴影层：支持同时添加多个阴影，点击「+」新增
• 实时预览：参数变化即时反映到预览盒子
• 一键复制 CSS：生成的 box-shadow 代码一键复制，直接粘贴到项目

如何使用

1. 调节阴影参数（拖拽滑块或输入数值）
2. 需要多层阴影时点击「+」新增
3. 预览满意后，点击「复制 CSS」
4. 粘贴到项目样式文件中

隐私说明

浏览器本地处理，数据不上传。

更多实用工具见 网页版总览，反馈 联系。