可视化生成 CSS box-shadow 和 text-shadow，支持多层阴影
开发者工具
关于此工具
CSS 阴影生成器是一款可视化创建 box-shadow 和 text-shadow 属性的工具。支持多层阴影，每层可独立控制偏移、模糊、扩展、颜色、透明度和内嵌模式，并提供新拟物和霓虹等预设效果，可快速获得结果。
主要功能
- 独立的 box-shadow 和 text-shadow 生成标签页
- 多层阴影支持，每层可独立控制参数
- 滑块控制偏移、模糊、扩展和透明度
- 内置新拟物、Material、发光和霓虹等预设
- 实时预览，支持颜色选择器和内嵌开关
- 一键复制生成的 CSS 输出
使用场景
- 设计新拟物风格的 UI 组件，使用柔和的双层阴影
- 为卡片和对话框创建 Material Design 层级阴影
- 为标题和标志生成霓虹文字效果
- 无需手动编写 CSS 即可原型化多层阴影效果
- 精细调整阴影透明度和模糊，实现微妙的深度效果
css
shadow
box-shadow
常见问题
什么是 CSS 阴影生成器？
CSS 阴影生成器是一款可视化工具，可以创建 box-shadow 和 text-shadow 属性，支持多层阴影、实时预览和一键复制。它完全在浏览器中运行，不会向任何服务器发送数据。
可以添加多个阴影层吗？
可以，您可以添加任意数量的阴影层。每层都有独立的偏移、模糊、扩展、颜色、透明度和内嵌模式控制。各层会合并为一个逗号分隔的 CSS 值。
有哪些预设可用？
box-shadow 预设包括新拟物、Material、发光、硬阴影、分层和内嵌。text-shadow 预设包括霓虹、复古、浮雕、火焰和发光。点击任意预设即可立即应用。
工具支持 text-shadow 吗？
支持，工具提供了专门的 text-shadow 标签页，可以为每层配置水平偏移、垂直偏移、模糊、颜色和透明度。通过标签栏在 box-shadow 和 text-shadow 之间切换。
我的数据会发送到服务器吗？
不会。所有阴影生成和预览渲染完全在浏览器中进行，不会上传任何数据到服务器，确保您的工作完全私密。