可视化创建 CSS 渐变效果，支持线性渐变和径向渐变，多色标自由调节，一键复制 CSS 代码。
90deg
background: linear-gradient(90deg, #667eea, #764ba2);
关于 CSS 渐变
CSS 渐变用代码代替图片来实现平滑的色彩过渡，好处是不产生额外网络请求、可以任意缩放不失真、还能随时用变量调整。实际用得最多的是 linear-gradient（线性）和 radial-gradient（径向）两种。
调好渐变后如果还需要换算色值，可以用 颜色转换工具 在 HEX、RGB、HSL 之间转换。
常见问题
多色渐变怎么让颜色分布更均匀？
默认情况下各色标等距分布，视觉上往往不均匀。可以手动指定每个色标的位置百分比，例如 0%、30%、70%、100%，把中间的距离拉开。
渐变能用在文字上吗？
可以，用 background-clip: text 配合透明文字色实现。注意要同时声明 -webkit-background-clip，否则 Safari 不生效。
渐变的性能比图片好吗？
通常更好。渐变由 GPU 直接绘制，不需要下载图片资源，放大也不会模糊。但在大面积区域上频繁重绘时，性能可能反而不如图片，需要实测。