CSS 盒阴影生成器
通过实时预览，以可视化的方式设计盒阴影效果。添加多个阴影层，调整每个参数，并复制 CSS 代码。
미리보기
그림자 레이어
CSS 코드
복사됨!
什么是 CSS 盒阴影生成器？
CSS 盒阴影生成器可帮助您为 HTML 元素创建阴影效果，而无需手动编写代码。您可以使用可视化控件调整水平/垂直偏移、模糊半径、扩展、颜色和不透明度等参数，该工具会为您生成精确的 CSS 属性值。
如何创建盒阴影
- 调整偏移 —— 使用 X 和 Y 滑块来定位阴影
- 设置模糊和扩展 —— 控制阴影的柔和度和大小
- 选择颜色 —— 选择阴影颜色并调整其不透明度
- 切换内阴影 —— 在外阴影和内阴影之间切换
- 添加图层 —— 堆叠多个阴影以获得复杂的视觉效果
- 复制 CSS —— 单击复制按钮以获取最终代码
为什么要使用此盒阴影生成器？
- 可视化编辑 —— 在预览框中实时查看阴影变化
- 多层阴影 —— 组合最多 5 个阴影层以获得深度效果
- 精确控制 —— 独立微调偏移、模糊、扩展、不透明度和内阴影
- 简洁输出 —— 获取格式正确的 CSS，可直接粘贴到您的样式表中
- 隐私 —— 一切都在您的浏览器本地运行
FreeToolbox 与其他阴影生成器的比较
| 功能 | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| 多层阴影 | 最多 5 层 | 单层 | 无限制 |
| 内阴影切换 | 是 | 是 | 否 |
| 不透明度控制 | 是 | 有限 | 是 |
| 广告 | 极少 | 大量 | 无 |
| 暗黑主题 | 是 | 否 | 是 |
常见问题
模糊和扩展有什么区别？
模糊控制阴影边缘的柔和/扩散程度。扩展控制阴影从元素大小扩展或收缩的程度。正扩展使其更大，负扩展使其更小。
我可以添加多个阴影吗？
是的。单击“添加图层”以堆叠最多 5 个阴影层。每个图层都具有所有参数的独立控件。
内阴影有什么作用？
内阴影将阴影移动到元素内部而不是外部，从而创建内部阴影或压入效果。
它也适用于文字阴影吗？
此工具生成盒阴影 CSS。文字阴影使用类似的语法，但没有扩展值或内阴影选项。您可以手动调整输出。
这个工具是免费的吗？
是的，完全免费，没有限制或注册要求。