Glyph WidgetsGlyph Widgets
关于联系隐私条款在Ko-fi上支持

© 2026 Glyph Widgets. 保留所有权利。

·

100% 客户端处理

渐变生成器

最后更新:2026年3月10日

使用可视化编辑器创建精美的线性、径向和锥形渐变。添加多个颜色停止点并即时生成CSS代码。

功能

  • ▶线性、径向和锥形渐变类型
  • ▶无限颜色停止点,带颜色选择器和位置滑块
  • ▶使用上/下控件重新排序颜色停止点
  • ▶线性和锥形渐变可调角度(0°–360°)
  • ▶编辑时实时预览更新
  • ▶一键复制CSS代码
  • ▶将渐变导出为SVG文件
  • ▶即时随机生成颜色和角度
  • ▶通过URL分享渐变
  • ▶保存和恢复预设(支持者功能)
  • ▶带恢复功能的渐变历史记录(支持者功能)
  • ▶100%客户端处理——数据不会离开您的浏览器

如何使用此工具

1

选择渐变类型

从渐变类型按钮中选择线性、径向或锥形。实时预览立即更新。

2

配置色标

使用颜色选择器和位置滑块定义您的颜色。点击「添加色标」添加更多颜色,或点击垃圾桶图标删除。使用上/下箭头重新排序色标。

3

设置角度

对于线性和锥形渐变,拖动角度滑块(0°–360°)控制渐变方向。径向渐变不使用角度。

4

复制或导出

点击「复制CSS」将background属性复制到剪贴板,或将渐变导出为SVG文件。您也可以使用分享按钮发送一个可重现您渐变的链接。

5

随机生成或重置

点击「随机化」生成随机角度的双色渐变,或点击「清除」将所有设置重置为默认值。

色标插值

每个色标定义一个颜色和0%到100%之间的位置。浏览器根据CSS渐变规范计算相邻色标之间的平滑过渡。您可以添加任意数量的色标来创建复杂的多色效果。

线性渐变

工具使用您选择的角度生成CSS linear-gradient()。颜色沿直线从起点混合到终点。更改角度会旋转渐变方向。

径向和锥形渐变

径向渐变使用radial-gradient(circle)产生从中心向外的圆形颜色过渡。锥形渐变使用conic-gradient()从设定的角度开始围绕中心点旋转颜色——适用于饼图、色轮和装饰效果。

SVG导出

导出为SVG时,工具将您的色标转换为SVG渐变元素(linearGradient或radialGradient),并将其打包成一个独立的SVG文件,可在设计工具中使用或嵌入网页。

可分享的URL

您的渐变类型、角度和色标被编码到页面URL中。分享此URL可让任何人在其浏览器中打开完全相同的渐变,无需手动重新创建。

常见问题

您可以创建三种类型:沿直线混合颜色的线性渐变、从中心点向外呈圆形辐射的径向渐变,以及像色轮一样围绕中心点旋转颜色的锥形渐变。

相关工具

UI渐变

浏览渐变预设

颜色选择器

选择任意颜色

颜色混合器

混合两种颜色

0%
100%
background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);
分享

Saved Presets is a Supporter feature.

Tool History is a Supporter feature.

Tool Notes is a Supporter feature.