CSS阴影生成器
预览
CSS 代码
box-shadow: 5px 5px 15px 0px #00000040;预设模板
CSS阴影生成器使用指南
UOTOL CSS阴影生成器是一款在线可视化box-shadow代码生成工具。支持调整水平偏移、垂直偏移、模糊半径、扩展半径、颜色和inset内阴影，支持多层阴影叠加，内置5种预设模板，一键复制CSS代码。所有数据本地处理，不上传服务器。
功能特点
- 可视化调整box-shadow参数，实时预览效果
- 支持多层阴影叠加，添加/删除阴影层
- 支持inset内阴影效果
- 5种预设模板，快速应用常用阴影
- 一键复制生成的CSS代码
- 所有数据本地处理，不上传服务器
使用步骤
- 拖动滑块调整阴影参数（偏移、模糊、扩展）
- 选择阴影颜色，可选inset内阴影
- 点击"+"添加多层阴影
- 从预设模板中快速应用常用阴影效果
- 点击"复制CSS"按钮复制生成的box-shadow代码
常见问题
什么是box-shadow？
box-shadow是CSS属性，用于给元素添加阴影效果，语法为：box-shadow: h-shadow v-shadow blur spread color inset; 其中h-shadow和v-shadow是必需的偏移参数。
如何实现多层阴影？
在box-shadow属性中用逗号分隔多个阴影值即可实现多层阴影，如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
inset内阴影是什么效果？
inset关键字使阴影出现在元素内部，产生凹陷效果，常用于输入框、按钮按压状态等场景。
模糊半径和扩展半径有什么区别？
模糊半径控制阴影的模糊程度，值越大阴影越柔和；扩展半径控制阴影在各个方向的扩展或收缩，正值扩大阴影，负值缩小阴影。