🎯 渐变类型
🌈 颜色停止点
👁️ 实时预览
📋 代码输出
Tailwind 类名
CSS 代码
💡 预设渐变
❓ 常见问题
Tailwind CSS渐变生成器是免费的吗？
是的，完全免费使用，无需注册，无需登录，所有功能都可以直接使用。
支持哪些渐变类型？
支持线性渐变（linear-gradient）、径向渐变（radial-gradient）和锥形渐变（conic-gradient）三种类型。
如何添加多个颜色停止点？
点击添加颜色按钮即可增加新的停止点，每个停止点可独立设置颜色和位置，最多支持10个停止点。
数据会上传到服务器吗？
不会。本工具采用纯前端技术，所有处理都在你的浏览器中完成，数据不会上传到任何服务器。
生成的代码如何使用？
工具同时输出Tailwind类名Tailwind类名和原生CSS代码。Tailwind类名可直接用于HTML元素，CSS代码可粘贴到样式文件中。
可以保存自定义渐变吗？
可以。工具内置收藏功能，点击收藏按钮保存渐变到浏览器本地存储，下次打开自动恢复。
Tailwind CSS渐变生成器能做什么？
Tailwind CSS渐变生成器是一款专为前端开发者和设计师打造的在线工具，帮助你快速创建精美的CSS渐变背景。支持线性渐变、径向渐变和锥形渐变三种类型，可自由添加多个颜色停止点、调节角度和位置，实时预览效果，一键复制Tailwind类名和原生CSS代码，让你的页面背景更加绚丽多彩。
核心功能
- 三种渐变类型：支持线性渐变（linear-gradient）、径向渐变（radial-gradient）和锥形渐变（conic-gradient），满足各种设计需求
- 多色停止点：最多支持10个颜色停止点，每个停止点可独立设置颜色和位置百分比
- 角度调节：0-360度角度滑块，精确控制渐变方向
- 预设渐变：内置20+精选渐变预设，一键应用快速开始
- 双格式输出：同时输出Tailwind类名和原生CSS代码，适配不同使用场景
- 随机生成：一键随机生成渐变，激发设计灵感
使用教程
1. 选择渐变类型：线性、径向或锥形
2. 调整角度滑块设置渐变方向
3. 点击颜色选择器设置每个停止点的颜色
4. 拖动位置滑块调整颜色过渡位置
5. 点击添加颜色按钮增加更多停止点
6. 确认效果后复制Tailwind类名或CSS代码
应用场景
场景1：网站Hero区域
为网站首屏创建引人注目的渐变背景，配合文字和按钮打造视觉冲击力强的着陆页。
场景2：UI组件装饰
为卡片、按钮、标签等UI组件添加渐变效果，提升界面质感和现代感。
场景3：数据可视化
在图表和仪表盘中使用渐变色表示数据范围，使数据展示更直观美观。
扩展知识
CSS渐变是CSS3引入的强大特性，允许在两个或多个颜色之间创建平滑过渡。Tailwind CSS通过bg-gradient-to-*类名系列提供渐变支持，如bg-gradient-to-r表示从左到右的渐变。对于更复杂的渐变效果（如径向渐变、多停止点），需要使用任意值语法如bg-[radial-gradient(...)]或直接使用原生CSS。渐变在Web设计中被广泛应用于背景、按钮、进度条、图表等场景，是现代UI设计不可或缺的视觉元素。