使用linear-gradient()可创建从左上到右下的蓝紫色渐变，语法为background: linear-gradient(to bottom right, #3498db, #8e44ad)；2. 通过设置body的height: 100vh并应用135deg粉红至红橙渐变，可实现全屏背景；3. 添加多个颜色节点如red到green可生成彩虹横向渐变；4. 径向渐变radial-gradient(circle, #ff9a9e, #fecfef)可实现中心扩散效果；5. 需注意元素高度、颜色对比等细节以提升视觉体验。
在CSS中，背景渐变是一种很常见的视觉效果，能让页面看起来更现代、更有层次感。实现一个初级的背景渐变项目非常简单，主要使用background属性配合linear-gradient()或radial-gradient()函数即可。
线性渐变的基本语法
最常用的渐变是线性渐变，颜色沿着一条直线过渡。你可以指定方向和颜色节点。
例如，创建一个从左上到右下的蓝紫色渐变背景：
background: linear-gradient(to bottom right, #3498db, #8e44ad);说明：
立即学习“前端免费学习笔记（深入）”；
- to bottom right 表示从左上角向右下角过渡
- 你也可以用角度表示，比如 45deg
- #3498db 是蓝色，#8e44ad 是紫色，浏览器会自动平滑过渡
应用到HTML元素
将渐变应用到页面背景或某个容器都很直接。比如设置整个页面背景：
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #f093fb, #f5576c);
}
这里用了粉红到红橙色的对角渐变，135deg 控制方向，height: 100vh 确保body占满视口。
添加更多颜色节点
你可以在渐变中加入多个颜色，让过渡更丰富：
background: linear-gradient(to right, red, orange, yellow, green);这会生成一个彩虹色的横向渐变。颜色越多，视觉越丰富，但注意不要太过杂乱。
径向渐变（可选进阶）
如果你想要从中心向外扩散的效果，可以用径向渐变：
background: radial-gradient(circle, #ff9a9e, #fecfef);circle 表示圆形扩散，也可以是 ellipse 椭圆，适合做光晕或焦点背景。
基本上就这些。掌握linear-gradient的方向、颜色和应用位置，就能快速做出好看的渐变背景。不复杂但容易忽略细节，比如确保元素有高度、避免颜色对比太强影响可读性。试试看吧！
