渐变色生成器 在线CSS线性径向渐变工具
渐变色生成器：创建线性渐变和径向渐变，支持最多5个色标和0-360度角度调节，一键复制CSS代码，适合网页设计和背景制作使用。
更新于 2026-08-16
相关工具
功能特性
- 创建线性渐变，角度0-360度任意调节，支持任何方向
- 创建径向渐变，中心向外圆形扩散效果
- 最多添加5个色标，每个色标可单独设置颜色和位置百分比
- 实时渐变预览，修改颜色、位置或角度后立即更新
- 一键生成可直接复制粘贴到样式表中的CSS代码
- 通过调整色标位置百分比控制渐变过渡节奏
- 一键删除任意色标，简化渐变设计
- 一键重置为预设渐变，重新开始设计
- 复制CSS代码到剪贴板，粘贴即可用于网页项目
- 在线性和径向渐变间切换，保留颜色设置
- 每个色标配有可视化颜色选择器，精确选取颜色
- 所有处理在浏览器本地完成，不上传任何数据
使用方法
- 1选择渐变类型：线性渐变用于方向性过渡，径向渐变用于从中心向外扩散
- 2拖动角度滑块（0-360度）控制线性渐变的方向
- 3点击色标的颜色块，使用颜色选择器选取新颜色
- 4左右拖动色标的位置滑块，控制颜色过渡的位置
- 5点击「添加色标」在现有色标之间插入新颜色
- 6点击色标上的X按钮删除不需要的色标
- 7实时预览面板自动响应任何参数变化
- 8点击「复制CSS」将渐变代码粘贴到项目的样式表中
常见问题
什么是CSS渐变色？
CSS渐变色是两种或多种颜色之间的平滑过渡效果。渐变可以是线性（沿方向）或径向（从中心向外圆形扩散），完全通过CSS创建，无需任何图片文件，广泛用于网页背景、按钮和装饰元素。
线性渐变和径向渐变有什么区别？
线性渐变沿指定方向（由角度控制）的直线过渡颜色。径向渐变从中心点向外呈圆形扩散，产生环形效果。
最多可以添加多少个色标？
最多可以添加5个色标。每个色标包含一个颜色和一个位置百分比。更多的色标可以实现更复杂多彩的渐变效果。
角度控制起什么作用？
角度（0-360度）决定线性渐变的方向。0度从下到上，90度从左到右，180度从上到下，270度从右到左。任意角度可创建对角线渐变效果。
生成的CSS代码如何使用？
点击「复制CSS」按钮将代码复制到剪贴板，然后粘贴到CSS文件或行内样式中。生成的代码是标准CSS background属性，所有现代浏览器均支持。
这些渐变色可以用在正式网站上吗？
可以。CSS渐变在Chrome、Firefox、Safari和Edge等所有现代浏览器中都得到支持。生成的代码使用标准语法，已被支持十余年。
能从图片里提取渐变吗？
不能。本工具从色标构建渐变，不读取图片。想模仿图片的效果，用取色器（浏览器开发者工具或任意取色应用）采样图片中的颜色，再把十六进制值填进这里的色标选择器即可，颜色值可以直接粘贴。
生成的 CSS 能在 Tailwind 或 Figma 里用吗？
Tailwind 可以，用任意值语法包裹即可，例如 bg-[linear-gradient(135deg,#f00,#00f)]。Figma 不能直接粘贴 CSS，需要用 Figma 的渐变工具按相同的颜色和色标手动重建，或者使用支持导入 CSS 渐变的插件。
色标位置百分比是什么意思？
色标位置（0-100%）决定该颜色在渐变中出现的位置。0%在起始端，100%在结束端。通过调整位置可以控制颜色之间过渡的快慢。
设计师一般怎么用这个工具？
设计师用它快速制作网站渐变背景、创建按钮渐变色、设计首页横幅背景、生成社交媒体图片，以及在不手写CSS的情况下试验色彩搭配。
怎么创建一个日落渐变效果？
起点用深蓝色(#1a1a2e)在0%，终点用橙红色(#e94560)在100%，中间添加橙黄色(#f5a623)在50%，角度设为180度，形成从上到下的日落渐变。
复制CSS之前可以预览效果吗？
可以。顶部的预览面板实时显示渐变效果，任何参数调整后立即更新。所见即所得，预览即最终的CSS效果。
为什么粘贴 CSS 后渐变没有显示？
生成的代码是标准的 background 属性，请按这些常见原因排查：同元素后面有另一条规则覆盖了 background（后写的规则优先）、简写冲突中渐变写到了 background 而不是 background-image、或元素没有尺寸，渐变会填满元素，空 div 没有高度就什么都看不到。IE 9 及更早的浏览器完全不支持 CSS 渐变。把规则粘贴到测试页面里可以快速定位问题。
为什么导出 PNG 后渐变出现色带条纹？
8 位 PNG 每个通道只存 256 个级别，跨度大的平滑渐变（尤其是深色到浅色或很长的渐变）会显示明显的色带条纹。本 CSS 渐变生成器输出的是代码而不是图片：把渐变渲染成 PNG（截图或导出）时，色带来自 PNG 格式本身，而不是渐变。解决方法：叠加轻微噪点/抖动层、使用渐变网格，或选择支持 16 位深度的导出工具。
为什么这个渐变生成器的颜色不能直接用在我的世界(Minecraft)里？
Minecraft 使用固定的调色板：旗帜只有 16 种基础色，地图画只有 4096 种颜色，网页 CSS 十六进制值无法在游戏里还原同样的渐变。本工具生成的是面向网站和平面设计的 CSS 颜色。要做游戏内渐变，请使用 Minecraft 地图画调色板工具，从中采样颜色。