👁️ 实时预览
🎯 Tailwind预设
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none
⚙️ 阴影参数
阴影层 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%纯前端运行，所有参数调整和代码生成均在浏览器本地完成，不会上传到任何服务器。