线性渐变通过方向或角度实现颜色过渡，如background: linear-gradient(to right, #ff7e5f, #feb47b)；径向渐变从中心向外扩散，如radial-gradient(circle, #ff9a9e, #fecfef)；重复渐变可创建条纹图案，如repeating-linear-gradient(45deg, #f00, #f00 10px, #000 10px, #000 20px)；使用时需注意可读性、fallback方案及暗色模式适配。
在CSS项目中实现背景渐变效果，是提升页面视觉层次的常用方式。只需几行代码，就能让单调的背景变得生动。下面介绍几种常见的渐变类型和使用方法。
线性渐变（Linear Gradient）
线性渐变是最常用的渐变类型，颜色沿着一条直线过渡。
基本语法：
background: linear-gradient(to right, #ff7e5f, #feb47b);说明：
立即学习“前端免费学习笔记（深入）”；
- to right：从左到右渐变，也可用 to left、to top、to bottom 或角度如 45deg
- #ff7e5f 到 #feb47b：起始与结束颜色，可添加多个颜色节点
示例：对角线渐变
background: linear-gradient(45deg, #00b4db, #0083b0, #005c8a);径向渐变（Radial Gradient）
颜色从中心点向外扩散，适合营造聚焦或柔和过渡效果。
background: radial-gradient(circle, #ff9a9e, #fecfef);说明：
立即学习“前端免费学习笔记（深入）”；
- circle：圆形渐变，也可用 ellipse（椭圆）
- 可指定位置，如 at center、at top left
示例：从右上角开始的椭圆渐变
background: radial-gradient(ellipse at top right, #a8edea, #fed6e3);重复渐变（Repeating Gradient）
适用于创建条纹或图案化背景。
repeating-linear-gradient(45deg, #f00, #f00 10px, #000 10px, #000 20px)通过控制颜色停靠点的位置，形成规律重复的条纹。
实用建议
使用渐变时注意以下几点：
- 确保渐变方向和颜色对比适合内容阅读，避免文字难以辨认
- 可结合 background-size 控制重复范围
- 为不支持渐变的旧浏览器提供纯色 fallback
- 使用 CSS 变量便于统一管理主题色
基本上就这些。掌握这几种渐变写法，能快速为项目增添现代感。实际应用中可以借助工具生成复杂配色，再嵌入代码中调整。不复杂但容易忽略细节，比如颜色过渡是否自然、是否适配暗色模式等。
