CSS 渐变生成器
可视化创建精美的 CSS 渐变
100% 客户端处理
%
%
这个 CSS 渐变生成器给你一块可视化的调色板，用来搭建线性、径向和圆锥渐变，调好后一键拿走可以直接上线的 CSS 代码。设计师和前端开发者不用再在样式表里瞎猜色值、反复刷新页面，而是边调边看，直到效果满意为止。
认识 CSS 渐变
渐变不是图片文件，而是浏览器实时绘制出来的值，由 linear-gradient()、radial-gradient()、conic-gradient() 这几个函数生成。每个函数接收一个方向或形状，再加上若干色标——颜色和它处在渐变轴上的百分比位置。线性渐变沿任意角度的直线过渡；径向渐变从中心以圆形或椭圆形向外扩散；圆锥渐变绕着一个点旋转，像色轮一样，特别适合做饼图和取色器。因为渐变是浏览器算出来的，无论元素多大都不会模糊，不占用任何网络流量，做动画也比换背景图顺滑。一个常见的坑：在 RGB 空间里，两个色相差异很大的颜色插值时会路过一片发灰发浑的区域，所以选择相邻色相通常能得到更干净的过渡。
如何使用
- 选择类型： 选择线性、径向或圆锥渐变
- 添加颜色： 添加并调整色标及其百分比位置
- 设置角度： 调整渐变方向（径向渐变则调整形状）
- 复制 CSS： 复制生成的 CSS 代码，粘贴到你的样式表
上方的大预览区会随着每次调整实时更新，你看到的效果就是复制出来的代码最终呈现的效果。
功能特性
- 线性、径向和圆锥渐变
- 色标数量不限，位置可调
- 角度和径向形状（圆形/椭圆）可调
- 整幅实时预览
- 一键复制生成的 CSS
- 全程在浏览器本地运行
使用场景
前端开发者不用打开设计软件，就能做出首屏大图背景和按钮悬停效果；设计师在把配色定进设计规范之前先快速试色；做邮件营销和落地页的人用它搭出吸睛的头部区域；维护老站点的人也可以用细腻的渐变替换掉呆板的纯色块，不加一张图片就能让页面更有层次。
相关工具
常见问题
支持哪些渐变类型？
支持线性、径向和圆锥渐变，可完全自定义角度、形状和色标。
可以添加超过2种颜色吗？
是的，您可以添加无限个色标来创建复杂的多色渐变。
生成的 CSS 是否跨浏览器兼容？
生成的 CSS 使用所有现代浏览器都支持的渐变语法。
怎么把渐变用到我的项目里？
点击复制按钮拿到生成的 CSS 声明，然后粘贴到样式表中，作为任意元素的 background 或 background-image 属性即可。