渐变色生成器 — 在线创建CSS线性与径向渐变
在线创建CSS渐变色：线性渐变和径向渐变生成器，支持多色标、角度控制和实时预览。一键复制CSS代码，浏览器本地运行，无需上传。
功能特性
- ✓创建线性渐变，角度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生成完全在你的设备上运行。没有任何数据上传或分享。
色标位置百分比是什么意思？
∨
色标位置（0-100%）决定该颜色在渐变中出现的位置。0%在起始端，100%在结束端。通过调整位置可以控制颜色之间过渡的快慢。
设计师一般怎么用这个工具？
∨
设计师用它快速制作网站渐变背景、创建按钮渐变色、设计首页横幅背景、生成社交媒体图片，以及在不手写CSS的情况下试验色彩搭配。
怎么创建一个日落渐变效果？
∨
起点用深蓝色(#1a1a2e)在0%，终点用橙红色(#e94560)在100%，中间添加橙黄色(#f5a623)在50%，角度设为180度，形成从上到下的日落渐变。
复制CSS之前可以预览效果吗？
∨
可以。顶部的预览面板实时显示渐变效果，任何参数调整后立即更新。所见即所得，预览即最终的CSS效果。