CSS 的三种渐变函数
CSS 提供三种渐变函数，行为各不相同。linear-gradient 沿某个角度延伸，其中 0deg 指向正上方，角度顺时针递增；radial-gradient 从中心点向外扩散，可以是圆形或椭圆；conic-gradient 绕中心点旋转，因此可以用来画饼图和色轮。三者都接受带明确位置的色标，也都有 repeating- 变体，通过平铺色标列表生成条纹和环形图案。本工具直接编辑这些色标，并给出可复制的声明。
如何使用CSS 渐变生成器 — 线性、径向与锥形
- 1在工具区域粘贴、输入或上传需要处理的内容。
- 2根据任务选择格式、尺寸、输出方式或校验选项。
- 3检查预览结果、提示信息或转换后的数据。
- 4确认结果无误后复制或下载，并用于后续工作。
CSS 渐变生成器 — 线性、径向与锥形的常见使用场景
快速完成日常任务
无需安装桌面软件，打开网页即可处理常见的文本、图片、数据或格式转换任务。
检查与整理内容
在提交文件、发布内容或复制结果之前，快速发现格式问题并获得结构清晰的输出。
注重隐私的浏览器处理
对于支持本地运行的工具，数据会留在当前浏览器中，不需要上传到第三方服务。
常见问题
线性渐变中 0deg 指向哪个方向？
在 CSS 中 0deg 指向元素顶部，角度顺时针递增，因此 90deg 指向右侧、180deg 指向下方。这与旧的 -webkit- 前缀语法以及数学中的常见约定不同，是渐变方向被搞反的常见原因。
怎样做出硬边色块而不是平滑过渡？
把两个色标放在同一位置，例如 red 50% 紧接 blue 50%，颜色就会在该点突变。把这种写法与重复变体结合即可生成条纹。
应该用 background 还是 background-image？
本工具输出 background-image，这正是渐变实际设置的属性。使用 background 简写也可以，但它会重置背景色、背景位置等其他属性，可能悄悄覆盖前面的声明。
锥形渐变的浏览器支持如何？
conic-gradient 在当前所有主流浏览器中都已支持。如果需要兼容非常旧的版本，可以在渐变声明之前先写一个纯色 background-color 作为回退。