CSS渐变生成器
这款 CSS 渐变生成器让你可视化地设计线性、径向和锥形渐变，一键即可复制可直接使用的 CSS 代码。拖动色标、调整角度、微调不透明度，实时预览同步更新，再也不用手写渐变语法。
它为想要快速做出渐变背景、多色过渡或透明渐隐效果的前端开发者和设计师而打造，无需记住 linear-gradient()、radial-gradient() 和 conic-gradient() 的写法。可以从精选预设入手，也可以从零开始自己搭建。
如何使用 CSS渐变生成器
选择渐变类型
选择线性实现沿直线过渡，选择径向实现圆形或椭圆形过渡，选择锥形实现绕中心点旋转扫描的过渡。
添加并编辑色标
点击渐变条添加色标，拖动手柄调整位置，或将其拖出渐变条以删除。在行内或色标编辑器中分别调整每个色标的颜色、位置和不透明度。
调整方向与形状
对于线性渐变，可用旋钮、输入框或 8 方向网格设定角度。对于径向渐变，可选择圆形或椭圆形，并用 3×3 网格定位中心。对于锥形渐变，可设定起始角度和中心位置。
复制你的 CSS
预览满意后，点击复制 CSS 即可获取完整的 background 规则，直接粘贴到样式表中。
功能特性
三种渐变类型
生成线性、径向和锥形渐变，每种都有各自的方向、形状和位置控件。
可视化色标
点击渐变条添加色标，拖动可调整位置，拖出即可删除，操作即时反馈。
角度旋钮与方向网格
拖动旋钮、输入数值或使用 8 方向快捷网格，将线性角度设定在 0° 到 360° 之间。
径向形状与位置
在圆形和椭圆形之间切换，用 3×3 九宫格定位原点，实现精确控制。
每个色标独立不透明度
降低任意色标的不透明度，输出会自动切换为 RGBA，随时可做透明渐隐。
高亮 CSS 输出
阅读整洁、彩色标注的渐变 CSS，一键将完整 background 规则复制到剪贴板。
撤销与重做
用按钮或 Ctrl+Z 和 Ctrl+Y 快捷键，在修改历史中逐步前进或后退。
随机与反转
生成一个全新的随机渐变激发灵感，或瞬间翻转当前色标的方向。
46 款精选预设
从 46 款按色系分类的精选渐变中挑选起点，再随心调整。
标准且私密的输出
生成在现代浏览器中通用的标准 CSS 渐变语法，全程在本地浏览器中完成。
常见问题
如何制作 CSS 渐变？
选择一种渐变类型，点击渐变条添加色标，然后调整角度、位置和不透明度，直到实时预览满意为止。点击复制 CSS 即可将完成的 background 规则复制到样式表中。
线性、径向和锥形渐变有什么区别？
线性渐变沿一条直线按设定角度过渡颜色。径向渐变从中心点以圆形或椭圆形向外过渡。锥形渐变绕中心点旋转扫描颜色，像饼图或色环一样。
如何制作三色（或多色）CSS 渐变？
点击渐变条上任意位置即可再添加一个色标，新色标会与周围的颜色融合。重复操作即可添加任意数量的色标，然后拖动每个色标定位。一个渐变至少要保留两个色标。
如何在 CSS 中制作透明渐变？
在色标编辑器中降低任意色标的不透明度。不透明度低于 100% 的色标会输出为 RGBA 颜色值，预览中的棋盘格图案会清楚地显示渐变在哪里变得透明。
如何删除一个色标？
将色标手柄拖出渐变条即可删除，也可以使用色标编辑器中的删除控件。渐变始终至少保留两个色标，因此无法删除最后两个。
可以复制生成的渐变 CSS 代码吗？
可以。CSS 面板会显示语法高亮的 background 规则，复制 CSS 按钮会把完整声明复制到剪贴板，你可以直接粘贴到样式表中。
生成的渐变兼容所有浏览器吗？
输出采用标准 CSS 渐变语法，受当前版本的 Chrome、Firefox、Safari 和 Edge 支持，无需任何浏览器前缀。
我的渐变数据会被保存在某处吗？
不会。每个渐变都完全在你的浏览器中生成。任何数据都不会发送到服务器，你的颜色和设计也不会被保存或追踪。
还没有评论，快来发表第一条！