最直接的写法是用 background-image: linear-gradient() 给 body 或容器设渐变背景；需配 background-color 降级，避免用 background 简写覆盖，并注意浏览器兼容性与移动端渲染问题。
background-image: linear-gradient() 是最直接的写法
HTML 个人页面加背景渐变，本质是给 body 或某个容器元素加 CSS 渐变背景。不用 JS，纯 CSS 就够了，核心就是 background-image 配合 linear-gradient() 函数。
常见错误是只写 background: #ff0000 这类单色，或者误用 gradient 当属性名（CSS 里没有这个属性）。
-
linear-gradient()必须写在background-image里，不能直接写background: linear-gradient(...)（虽然部分浏览器兼容，但不规范） - 起始方向可写
to top、to bottom right、或角度如45deg；不写默认是to bottom - 颜色值支持十六进制、rgb()、hsl()，甚至带透明度的
rgba(255, 0, 0, 0.8) - 务必补上纯色
background-color作为降级：老版本 IE 不支持渐变，至少保证有底色
给 body 加全屏渐变背景的最小可行代码
直接贴到你的 CSS 文件或 标签里就能生效，不需要改 HTML 结构。
body {
margin: 0;
min-height: 100vh;
background-color: #6a11cb;
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
-
min-height: 100vh比height: 100vh更稳妥——内容超长时不会截断渐变 - 如果用了
background简写，它会覆盖掉background-image，所以别混用：background: #fff url(...) no-repeat会把渐变干掉
想让渐变动起来？加 transition 或 animation 要小心
渐变本身不能被 transition 直接过渡（CSS 规范不支持），但可以曲线救国：
- 用
background-position配合background-size: 200% 200%实现位移式动效 - 用
@keyframes改变多个background-image的 opacity（需两层伪元素叠加） - 更简单实用的做法：监听鼠标移入，切换预设的两种渐变色值，用
transition: background-image 0.5s—— Chrome/Edge 111+、Firefox 119+ 已支持该过渡（但 Safari 仍不支持）
所以「动效」目前不是开箱即用的功能，得先确认目标浏览器范围。
移动端适配和性能小陷阱
在手机上测试时容易发现渐变“糊了”或“闪一下”，通常不是写法问题，而是渲染机制差异：
- iOS Safari 对
linear-gradient()的抗锯齿处理较弱，斜向渐变（如45deg）边缘可能出现像素噪点；换成to bottom right或加大色标间隔能缓解 - 别在滚动容器（比如
overflow: scroll的 div）里用大尺寸渐变背景，重绘开销高，可能掉帧 - 如果页面有半透明导航栏，确保渐变从
body开始，而不是被某个 wrapper 层遮住——检查 DOM 结构里是否多套了一层div#app之类
真正麻烦的往往不是怎么写，而是渐变终点位置没对齐视口、或被其他样式意外覆盖。调试时打开开发者工具，盯着 computed 样式里的 background-image 是否真的生效，比反复改代码更快。
