CSS渐变生成
⚡ 本地运行🔒 不上传数据🆓 免登录免费
CSS渐变不是一张图片，而是一段让浏览器按数学公式逐像素渲染颜色的CSS函数。linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) 这行代码的意思是：沿135度方向，从起点到终点，在两种颜色之间做平滑插值——中间每一个像素的颜色都由公式算出来。径向渐变（radial-gradient）是从一个中心点向四周扩散，锥形渐变（conic-gradient）是绕中心点旋转扫过一圈。每种渐变都由「色标」定义：颜色值加一个位置百分比，浏览器在相邻色标之间自动过渡。本工具就是把这套语法变成可视化操作：你拖颜色、拖位置，工具实时拼出等价的CSS。
三个最典型的高频场景。第一，着陆页与Hero区背景：营销页的大面积彩色背景几乎全是渐变，手写要反复调角度和色标，用可视化工具拖几下、复制代码，比在设计稿和浏览器之间来回猜快一个数量级。第二，按钮与卡片的质感：主按钮用135度双色渐变、悬停时微调角度，是SaaS产品最常见的"高级感"来源，预设库里的日落、霓虹、紫梦都是可以直接套用的成品配色。第三，设计稿转代码：设计师在Figma里调好的渐变，前端照着色值和角度在这里复刻一遍，立刻得到可直接粘贴的background声明，不用再装插件或翻文档查语法。
四个必须知道的边界。第一，色标位置可以超出0%~100%，也可以两个色标设在同一位置——后者会产生一条硬分界线（比如0%~50%纯红、50%~100%纯蓝），这是合法的，常用来做双色拼接条纹，不是bug。第二，浏览器兼容性：线性与径向渐变所有现代浏览器都支持，锥形渐变在Safari 12.1之前的版本和IE全系不支持；本工具可选输出-webkit-前缀和纯色回退（background: #4facfe），旧浏览器至少能显示一个接近的纯色。第三，颜色输入只接受#RGB或#RRGGBB格式，非法值会被自动还原成上一个合法值，不会生成坏代码。第四，渐变是背景层，可以和background-image、background-size叠加使用，但注意渐变本身没有"尺寸"概念——想让它只占元素一半，要用background-size: 50% 100%配合no-repeat来实现。
一个小技巧：渐变代码里颜色的顺序决定视觉重心，把最亮的颜色放在终点（100%）会让区块看起来"向上发光"，适合CTA按钮；把深色放起点适合做顶部导航的压暗效果。随机渐变按钮适合在灵感枯竭时快速刷出几十种组合，看到顺眼的再微调色标位置，比从零调色快得多。
使用方法
- 选择渐变类型：线性渐变（调角度）、径向渐变（选圆形或椭圆）、锥形渐变（调起始角度），右侧大色块实时预览效果。
- 在色标区为每个色标选颜色（点颜色块或直接输入#RRGGBB色值）、拖动滑块调整位置百分比；点「添加色标」最多加到8个，色标多于2个时可单独删除。
- 需要兼容旧浏览器时勾选「包含浏览器前缀」，工具会自动输出-webkit-版本和纯色回退行；不需要时保持默认的干净两行。
- 点「复制CSS代码」把background声明粘贴到样式表里；想换灵感就点「随机渐变」或直接点预设色块一键套用。
常见问题
复制出来的CSS有三行，每行是什么意思？
第一行 background: #4facfe; 是纯色回退，给不支持渐变的远古浏览器看的，颜色取第一个色标。第二行带 -webkit- 前缀，是给2013年前后的旧版Chrome/Safari准备的。第三行是标准语法，现代浏览器都认这一行。三行按顺序写，浏览器会自动用它能理解的最后一行，渐进增强，不用删。
线性渐变的角度是怎么算的？
0deg表示从下往上（to top），90deg表示从左往右（to right），顺时针增加。最常用的135deg是从左上到右下，也是大多数预设的默认值。角度滑块拖到哪里，预览和代码实时同步，不用心算。
锥形渐变在哪些浏览器下会失效？
conic-gradient 需要 Chrome 69+、Firefox 83+、Safari 12.1+、Edge 79+。IE全系和更早的版本会直接忽略这行声明，显示你设置的纯色回退。如果目标用户里老旧浏览器占比高，建议只用线性或径向渐变。
两个色标位置设成一样会怎样？
会产生一条清晰的硬分界线而不是平滑过渡，例如 #ff0000 50%、#0000ff 50% 得到左半红右半蓝的拼接效果。这是CSS标准行为，常被用来做双色条纹、进度条分段，不用担心是工具出bug。
生成的代码能直接用在Tailwind或行内样式里吗？
可以。复制的是标准 background 声明，粘贴到CSS文件、<style>标签或元素的style属性里都有效。Tailwind项目里可以放到任意class下，或者用 arbitrary value 写成 bg-[linear-gradient(...)]，注意把空格按Tailwind规则换成下划线。