“丝滑”渐变需避色带、方向错位、渲染不全：方向用to bottom right或45deg；body设min-height: 100vh、margin: 0、background-repeat: no-repeat；防色带可用hsl()、噪点图或加过渡色标；文字可读性靠对比度检测、background-clip: text或遮罩层。
直接用 background: linear-gradient(...) 很容易，但“丝滑”关键不在写法，而在避免色带（banding）、方向错位、渲染不全这三类常见问题。
方向写对：to bottom right ≠ 从左上到右下
很多人误以为 to top right 是左上→右下，其实它是从右下指向左上。真正实现左上到右下的写法是：
-
to bottom right（推荐，语义清晰） - 或用角度
45deg（更精确，不受容器宽高比影响）
高度撑满：body 默认没高度，渐变会平铺出条纹
空页面中 高度仅由内容决定，可能只有几像素，导致渐变被重复平铺，出现红蓝横条。必须显式控制：
-
min-height: 100vh确保至少占满视口 -
margin: 0清除浏览器默认外边距 -
background-repeat: no-repeat或直接用background简写（自动覆盖 repeat）
防色带：加轻微噪点或调整颜色格式
纯色渐变在低分辨率屏或压缩传输下易出现肉眼可见的色阶条纹（banding）。缓解方法：
- 用
hsl()或rgba()替代十六进制，比如hsl(200, 100%, 60%)比#00aaff过渡更柔 - 叠加极低透明度噪点图：
background-image: linear-gradient(...), url("data:image/svg+xml,%3Csvg...%3E"); - 对敏感场景（如深蓝→紫），在中间加一个过渡色标，例如：
blue, #6a5acd, purple
文字可读性：别让渐变吃掉文字
从浅色到深色的渐变背景上，固定设 color: white 或 black 很可能某一段文字看不清。实用方案：
- 用 Chrome DevTools 的 Contrast 工具实时测任意区域对比度
- 文字用
background-clip: text+-webkit-text-fill-color: transparent直接“变成”渐变本身（需加前缀兼容 Safari） - 加半透明白/黑遮罩层（
::before叠在背景上），再放文字，保证全局可读
