CSS 渐变生成器
可视化的 CSS 渐变背景生成器，支持多色渐变、Tailwind 生成与实时预览。
预览
点击色条添加颜色，拖动滑块调整位置
设置
颜色断点
CSS 代码
background: linear-gradient(90deg, rgb(255, 81, 47) 0%, rgb(221, 36, 118) 100%);Tailwind: bg-[linear-gradient(90deg,_rgb(255,_81,_47)_0%,_rgb(221,_36,_118)_100%)]
关于此工具
这是一款功能强大的 CSS 渐变生成器，旨在帮助前端开发者和设计师快速创建漂亮的渐变背景。工具提供了直观的可视化编辑器，您可以轻松切换线性渐变（Linear）、径向渐变（Radial）与锥形渐变（Conic），通过拖拽滑块精确控制颜色断点的位置，并实时调整渐变角度与中心位置。支持径向渐变的形状（圆形/椭圆）与大小控制。生成的代码支持标准 CSS 与 Tailwind CSS 任意值语法，支持一键复制，大幅提升开发效率。
功能特点
- 🎨 多重模式：支持线性 (Linear)、径向 (Radial) 与锥形 (Conic) 渐变
- 🎯 精确控制：可调节中心点坐标、径向形状 (Circle/Ellipse) 及大小
- 🌈 多色断点：支持添加任意数量的颜色断点，精确控制位置与不透明度
- 📦 Tailwind 支持：自动生成 Tailwind CSS 任意值语法代码
- ⚡ 实时预览：所见即所得，调整参数即刻看到效果
- 💻 代码生成：自动生成标准的 CSS background 与重复渐变代码