渐变类型
90°
形状
色标
预设
实时预览
本地处理
关于此工具
CSS 渐变是由浏览器生成的图像，可在两种或多种颜色之间平滑过渡，使用 linear-gradient()、radial-gradient() 或 conic-gradient() 函数声明。每个色标将一种颜色与一个可选位置（沿渐变线或弧线的百分比）配对，线性和锥形渐变会增加一个角度来设定过渡方向，而径向渐变则采用一个形状（圆形或椭圆）和一个原点位置。
用它来设计主视觉背景、按钮填充、卡片叠层和分隔线点缀，而无需手动微调语法：选择类型、拖动角度、添加至多六个色标，然后复制可直接粘贴的 background 声明。预览放置在棋盘格背景上，让你可以看到半透明色标如何叠加合成，而预设则提供经过测试的双色标和三色标配色方案作为起点。
渐变以 CSS 图像形式渲染，因此没有固有尺寸——请设置宽度和高度（或将其用作背景），否则元素会塌缩，你将什么都看不到。
常见问题
CSS 中线性、径向和锥形渐变有什么区别？
线性渐变沿一条直线按给定角度过渡颜色，径向渐变以圆形或椭圆形从中心点向外辐射，而锥形渐变则像时钟指针一样绕中心点旋转扫过颜色，这就是它常用于色轮和饼图效果的原因。
CSS 渐变的角度是如何工作的？
对于 linear-gradient()，角度 0deg 使渐变指向正上方（朝向顶部），90deg 指向右侧，180deg 向下，270deg 向左，按顺时针方向递增。对于 conic-gradient()，from <angle> 值只是绕中心旋转颜色扫描的起始位置。
我能在 CSS 渐变中使用两种以上的颜色吗？
可以。渐变接受任意数量的、以逗号分隔的色标，每个色标可选地指定一个位置，例如 #f00 0%, #ff0 50%, #00f 100%。色标按你书写的顺序放置，本生成器最多支持六个。