使用方法
- 选择线性、径向或锥形渐变，然后设置角度或中心位置。
- 设置每个色标的颜色、不透明度和位置。最多可添加六个色标，也可以移除不需要的色标。
- 查看预览，然后将 CSS 代码复制到样式表中。
工作原理
输出为标准的 CSS background 声明。线性渐变沿角度方向延伸：0deg 表示从下到上，90deg 表示从左到右，180deg 表示从上到下。径向渐变从中心点向外扩散，呈圆形或适应容器的椭圆形。锥形渐变从选定角度开始，围绕中心点旋转，适合制作类似饼图的效果和色轮。
色标按位置顺序排列，因此您可以自由拖动色标。降低不透明度的色标会以 rgba() 表示，这样背景就能透出来。两个色标位于同一位置时会形成清晰的边缘，而不是平滑过渡，可用于制作条纹。
这三种渐变函数都适用于所有当前浏览器。渐变默认在 sRGB 色彩空间中混合，互补色之间可能会显得稍灰（例如蓝色和黄色）；添加一个更明亮的中间色标可以避免这种情况。
示例
柔和的页眉背景
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) 可实现从上到下的柔和渐变，同时确保深色文字清晰易读。
硬边条纹
使用四个色标：#0b5d1e 0%、#0b5d1e 50%、#f2c14e 50%、#f2c14e 100%。两个位于 50% 的色标相接而不渐变，从而形成两块纯色区域。
聚光灯效果
在纯色上叠加一个径向渐变（左上角的圆形渐变），从 rgba(255, 255, 255, 0.6) 过渡到 rgba(255, 255, 255, 0)，即可在角落营造柔和的光照效果。
常见问题
0deg 指向哪个方向？
在 CSS 中，0deg 指向上方，因此渐变从底部开始，向顶部延伸。90deg 表示从左到右。这与某些设计应用不同，在那些应用中，0° 通常表示从左到右。
可以将渐变用于文字吗？
可以：先应用背景，再添加 background-clip: text 和 color: transparent。请检查文字在渐变的所有位置上与页面背景之间都保持足够的可读性。
需要使用 -webkit-linear-gradient 之类的浏览器前缀吗？
不需要。当前浏览器支持无前缀语法。只有面向很多年前的浏览器时才需要添加前缀。
隐私
所有内容均在浏览器中生成。您的颜色和设置不会发送或存储。