CSS 渐变背景教程：可视化生成 linear-gradient、radial-gradient 和 conic-gradient

CSS 渐变不需要图片就能做出平滑的过渡色背景，文件更小、缩放不失真。CSS 渐变生成器 可视化地调整参数并生成代码。

使用步骤

1. 选择类型：打开 CSS 渐变生成器，在“类型”中选线性（linear）、径向（radial）或锥形（conic）。
2. 调整角度：线性渐变拖动“角度”滑块设置方向，例如 135 表示从左上到右下。
3. 选择颜色：点“颜色1”“颜色2”挑选颜色；需要三色渐变时勾选“使用颜色3”。
4. 复制代码：预览区实时显示效果，满意后点“复制 CSS”，粘贴到你的样式表。

语法说明

background: linear-gradient(135deg, #3b5bfd, #ff6ec4);
background: radial-gradient(circle, #3b5bfd, #ff6ec4);
background: conic-gradient(#3b5bfd, #ff6ec4, #3b5bfd);

角度方向：0deg 从下到上，90deg 从左到右，180deg 从上到下，135deg 从左上到右下。也可以写成 to right、to bottom right 等关键字。

控制色标位置：linear-gradient(90deg, #3b5bfd 0%, #ff6ec4 70%) 让第二种颜色从 70% 处开始纯色。

常见用法

• 渐变文字：background: linear-gradient(90deg, #3b5bfd, #ff6ec4); -webkit-background-clip: text; background-clip: text; color: transparent;
• 从图片取色：想让渐变与 Logo 或照片配色一致，先用 图片取色器 取出颜色值。
• 兼容性：linear-gradient、radial-gradient 在所有现代浏览器中都可直接使用，conic-gradient 需要较新的浏览器版本（Chrome 69+、Safari 12.1+、Firefox 83+）。