CSS 渐变（Gradient）允许你在两种或多种颜色之间创建平滑的过渡效果。渐变本质上是一种特殊的图像类型（ <image> ），可以用在任何接受图片值的地方，包括 background 、 background-image 、 border-image 、 mask-image 等属性。 linear-gradient() — 线性渐变：沿一条直线方向过渡 radial-gradient() — 径向渐变：从一个中心点向外扩散 conic-gradient() — 锥形渐变：围绕中心点旋转过渡 渐变在现代网页设计中应用极为广泛，从按钮背景、卡片装饰到全屏 Hero 区域，几乎无处不在。掌握 CSS 渐变是前端开发者的必备技能。 一、线性渐变 linear-gradient direction ：渐变方向，可以是角度值（如 90deg）或关键词（to right、to bottom） color-stop ：颜色停止点，可以是颜色值，也可以是"颜色 + 位置"（如 red 30%） 使用 to 关键词指定方向（渐变终点方向）： 角度值的含义：0deg 表示渐变方向从下往上，顺时针旋转。45deg 表示从左下到右上，90deg 表示从左到右，180deg 表示从上到下。 当省略色标位置时，浏览器会自动均匀分配各颜色的过渡区间。 将两个相邻色标设在同一位置，可以创建清晰的分界线： 重复线性渐变 repeating-linear-gradient 使用 repeating-linear-gradient 可以自动重复渐变图案： 二、径向渐变 radial-gradient shape ：圆形（circle）或椭圆（ellipse，默认） size ：渐变半径大小（closest-side、farthest-side、closest-corner、farthest-corner） position ：中心点位置（默认 center） closest-side ：渐变边缘到达最近的容器边时停止 farthest-side ：渐变边缘到达最远的容器边时停止 closest-corner ：渐变边缘到达最近的容器角时停止 farthest-corner （默认）：渐变边缘到达最远的容器角时停止

重复径向渐变 repeating-radial-gradient 三、锥形渐变 conic-gradient 锥形渐变围绕中心点旋转颜色过渡，类似于色轮或饼图效果。起始角度默认为 0deg（12点钟方向），顺时针旋转。 重复锥形渐变 repeating-conic-gradient 使用 transparent 关键词可以创建渐隐效果： 玻璃拟态（Glassmorphism）背景 渐变本身性能良好，浏览器通过 GPU 加速渲染 避免在 animation 中频繁改变渐变颜色值，这会导致重绘开销增大 对于动画渐变，推荐使用 background-position 或 background-size 来模拟动画，而不是改变渐变本身 conic-gradient 在某些浏览器上的渲染性能略低于线性和径向渐变 linear-gradient ：所有现代浏览器全面支持（IE10+） radial-gradient ：所有现代浏览器支持（IE10+ 部分支持） conic-gradient ：Chrome 69+、Firefox 83+、Safari 12.1+ 支持 旧版 WebKit 浏览器需要 -webkit- 前缀 渐变方向 to right 和 90deg 有什么区别？ 效果相同。 to right 等价于 90deg 。角度从 0deg（向上）开始顺时针计算： 0deg = to top ， 90deg = to right ， 180deg = to bottom ， 270deg = to left 。 可以。多个渐变可以用逗号分隔叠加在一起，后声明的渐变覆盖在前面的渐变之上。可以利用 transparent 让底层渐变透过来显示： CSS 自定义属性可以与渐变配合使用，便于主题切换： 可以。使用 border-image 或者更推荐的 background-clip 技巧（见上文"渐变边框"示例），可以实现渐变边框效果。 手动编写 CSS 渐变代码虽然不难，但实时预览和微调参数会大幅提高效率。使用我们的 在线 CSS 渐变生成器 ，可以通过可视化界面实时调整渐变方向、颜色和位置，自动生成可复制的 CSS 代码，所有操作在浏览器本地完成。 CSS 渐变是前端开发中最常用的视觉技术之一。线性渐变适合按钮、横幅等方向性强的场景；径向渐变适合聚光灯、光晕等效果；锥形渐变适合色轮、饼图、棋盘格等旋转性图案。熟练掌握三种渐变的使用方法，能够让你在网页设计中创建出丰富多样的视觉效果。 更多前端工具，欢迎访问 EITools 在线工具箱 。 浙ICP备2026073450号