免费在线Tailwind阴影生成器，可视化调整box-shadow参数，实时预览效果，生成Tailwind CSS类名和自定义CSS代码，无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用👁️ 实时预览
🎯 Tailwind预设
⚙️ 阴影参数
阴影层 1
📦 生成代码
CSS代码
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
Tailwind配置
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
'custom': '0 4px 6px -1px rgba(0,0,0,0.1)'
}
}
}
}
❓ 常见问题
Tailwind CSS有哪些内置阴影？
提供shadow-sm、shadow、shadow-md、shadow-lg、shadow-xl、shadow-2xl、shadow-inner和shadow-none共8个内置阴影级别。
如何自定义Tailwind阴影？
在tailwind.config.js中通过extend.boxShadow添加自定义阴影值，本工具生成的CSS代码可直接复制到配置文件中使用。
支持多层阴影吗？
支持。CSS box-shadow支持多层阴影，用逗号分隔。本工具支持添加多个阴影层，每层可独立调整参数。
inset阴影是什么？
inset阴影是内阴影，阴影出现在元素内部而非外部。常用于输入框凹陷效果、按钮按下状态等。
如何让阴影有颜色？
Tailwind默认阴影颜色为黑色半透明。可通过shadow-{color}工具类修改，自定义阴影可直接在box-shadow值中设置RGBA颜色。
数据安全吗？
完全安全。本工具100%纯前端运行，所有参数调整和代码生成均在浏览器本地完成，不会上传到任何服务器。
Tailwind阴影生成器能做什么？
Tailwind阴影生成器是一款面向前端开发者和UI设计师的在线工具，提供可视化的box-shadow参数调整界面，实时预览阴影效果，并自动生成Tailwind CSS类名和自定义CSS代码。无论是使用Tailwind内置预设还是创建自定义阴影，本工具都能帮你快速实现理想的光影效果。
核心功能
- Tailwind预设：一键应用shadow-sm到shadow-2xl等8个Tailwind内置阴影级别
- 可视化调整：通过滑块实时调整X/Y偏移、模糊半径、扩展半径、颜色和透明度
- 多层阴影：支持添加多个阴影层，每层独立控制，实现复杂光影效果
- Inset内阴影：支持内阴影模式，用于凹陷效果和按钮按下状态
- 双格式输出：同时生成标准CSS box-shadow代码和Tailwind配置代码
使用教程
1. 选择Tailwind预设或手动调整滑块参数；2. 实时预览区域会即时显示阴影效果；3. 调整颜色选择器和透明度滑块改变阴影颜色；4. 点击"添加阴影层"创建多层阴影效果；5. 复制生成的CSS代码或Tailwind配置代码到项目中使用。
应用场景
场景一：UI组件设计
为卡片、按钮、弹窗等UI组件设计精致的阴影效果，提升界面的层次感和立体感。
场景二：Tailwind主题定制
在Tailwind项目中定制品牌专属的阴影效果，通过tailwind.config.js扩展boxShadow配置。
场景三：设计系统规范
为设计系统定义统一的阴影层级规范（如elevation-1到elevation-5），确保产品视觉一致性。
扩展知识
CSS box-shadow语法：box-shadow: [inset] offsetX offsetY blurRadius spreadRadius color。其中offsetX/Y控制阴影偏移方向，blurRadius控制模糊程度（值越大越柔和），spreadRadius控制阴影扩展（正值扩大、负值收缩）。Tailwind CSS的shadow工具类本质上是预定义的box-shadow值，通过tailwind.config.js的extend.boxShadow可以添加自定义阴影。多层阴影用逗号分隔，浏览器从前往后依次绘制，常用于创建更自然的光影效果。