Glyph WidgetsGlyph Widgets
工具关于联系博客隐私条款移除广告在Ko-fi上支持

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

·

100% 客户端处理

开发者
文本和写作
图像和颜色
媒体
网络和SEO
实用工具
隐私与安全
计算器
  1. 首页
  2. 图像和颜色
  3. 颜色工具
  4. 渐变生成器

渐变生成器

最后更新: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可让任何人在其浏览器中打开完全相同的渐变,无需手动重新创建。

常见问题

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

相关工具

Color Picker

Pick any color

Color Blender

Blend two colors

Contrast Checker

Check WCAG color contrast ratios for accessibility compli...

Color Converter

Convert colors between HEX, RGB, HSL, HSB, and CMYK formats

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.