渐变色生成器让你一边拖滑块一边看效果,最后得到可以直接粘贴进样式表的 CSS 渐变代码。它支持线性渐变和径向渐变,可以设置任意数量(至少两个)的颜色节点,每个节点有自己的颜色和位置。它生成的是一行 CSS 的 background 声明,不能导出图片,也不支持圆锥渐变、重复渐变或预设模板库。径向渐变可以选圆形或椭圆,每个颜色节点还可以单独设置透明度。
操作步骤
- 页面顶部是一块高 160 像素的预览区,会实时显示当前渐变。
- 在「线性渐变」和「径向渐变」两个按钮之间选择类型。选了径向渐变时会出现「形状」选项,可以在「圆形」和「椭圆」之间切换。
- 选了线性渐变时会出现「角度」滑块,范围 0 到 360 度,默认 90 度,即从左向右。0 度是从下往上,180 度是从上往下。
- 在「颜色节点」区域,点击色块打开取色器选颜色,拖第一个滑块调整这个颜色所在的位置(0% 到 100%),第二个较短的滑块(标签「不透明 xx%」)调整这个节点的不透明度,100% 为完全不透明,低于 100% 时输出 rgba() 颜色。默认有两个节点:#3D63DD 在 0%,#2FA37A 在 100%。
- 点击「添加颜色节点」增加一个节点,新节点默认是白色 #FFFFFF,位置 50%。节点列表在拖动时不会重排;点「按位置排序」按钮,或者在位置滑块失去焦点时,列表才会按位置从小到大重新排列。想删除节点,点击这一行最右边的垃圾桶图标,但最少需要保留两个节点。
- 在「CSS 代码」区域点击「复制」,把形如 background: linear-gradient(...); 的完整声明复制到剪贴板,按钮会暂时显示「已复制」。
输出示例
不改任何设置时,工具生成的代码是:background: linear-gradient(90deg, #3D63DD 0%, #2FA37A 100%); 。切换到径向渐变后变成:background: radial-gradient(circle, #3D63DD 0%, #2FA37A 100%); 。再添加一个节点,默认颜色为白色、位置 50%,代码会变成 linear-gradient(90deg, #3D63DD 0%, #FFFFFF 50%, #2FA37A 100%),也就是蓝色渐变到白色再渐变到绿色。生成的代码按位置从小到大排序,所以你在界面上节点的先后顺序不影响输出。
支持范围与已知限制
- 只有线性和径向两种。径向渐变可选 circle(圆形)或 ellipse(椭圆),都是从中心向外,不能设置起点位置或半径。
- 颜色来自浏览器的取色器,只能得到 #RRGGBB 格式的颜色,不能直接输入颜色名、rgb() 或 hsl() 值。透明度通过每个节点的「不透明」滑块(0% 到 100%,整数步进)单独设置,低于 100% 的节点会输出为 rgba()。
- 节点位置只能用滑块以整数百分比调整,不能输入像素值。把两个节点拖到同一位置可以得到硬边效果。
- 角度滑块的步进是整数度。
- 节点列表在界面上按添加顺序显示,拖动时不会自动排序;点「按位置排序」或位置滑块失去焦点后才会重排。输出的 CSS 代码始终按位置排序。
- 复制的是完整的 background 声明,包括 background: 前缀和末尾分号,如果你只需要渐变值本身,请去掉这两部分。
- 输出不包含带浏览器前缀的旧写法,现代浏览器普遍支持标准写法,但非常老的浏览器未必支持。
- 页面不保存你的设置,刷新后回到默认的蓝绿渐变。
角度怎么对应方向?
CSS 线性渐变里,0 度表示渐变从下往上,90 度表示从左向右,180 度表示从上往下,270 度表示从右向左。拖动滑块时看预览区,最直观。
怎么做出一个硬边条纹,而不是平滑渐变?
把两个颜色节点拖到同一个百分比位置,颜色就会在那个位置直接切换,没有过渡。例如两个节点都放在 50%,就会形成一条分界线。
怎么把渐变用在网页里?
复制代码后粘贴进 CSS 规则,例如把它放在某个元素的样式里,元素就会使用这个渐变作为背景。如果需要叠加图片,可以在 background 里用逗号分隔多个值,不过这需要你自己手动改写。
能做带透明度的渐变吗?
可以。每个颜色节点都有「不透明」滑块,调到低于 100% 后,输出的代码里该颜色会变成 rgba(r, g, b, a) 形式,0% 为完全透明。预览区背后没有棋盘格,透明部分显示的是页面背景色。
隐私与处理方式
渐变的预览和代码生成都在你的浏览器里完成,选择的颜色和位置不会发送到服务器,也不会保存。「复制」按钮只是把文字写入你本机的剪贴板。