CSS背景渐变不平滑的主因是色标设置不合理、角度单一及缺乏过渡层次；应合理分布色标、选用非整数斜向角度（如137deg）、引入HSL色彩或透明度优化，提升视觉平滑度。
CSS 背景渐变不平滑，通常不是因为浏览器不支持，而是渐变色停点（color stop）设置不合理、颜色过渡太突兀，或角度选择导致视觉锯齿感。用 linear-gradient 实现平滑渐变，关键在控制好颜色过渡节奏和方向逻辑。
颜色停点之间留出过渡空间
很多人写成这样：background: linear-gradient(to right, #ff0000, #0000ff);
这会让红到蓝“硬切”，中间缺乏中间色缓冲，人眼容易感知断层。
- 改成带明确停点的写法，给过渡留余地：
background: linear-gradient(to right, #ff0000 0%, #ff6600 25%, #0066ff 75%, #0000ff 100%); - 更推荐用 HSL 或渐变工具生成中间色，比如从
hsl(0, 100%, 50%)到hsl(240, 100%, 50%)，比直接用 HEX 更易控制平滑度
角度别只用 0deg / 90deg 这类整数
纯水平（90deg）或垂直（0deg）渐变，在高 DPI 屏幕或大尺寸容器中，容易因像素对齐问题显出条纹感；斜向角度（如 137deg、37deg）反而更“打散”色带，观感更柔和。
- 试试
linear-gradient(137deg, #4facfe, #00f2fe)—— 常见蓝青渐变用这个角度，比 90deg 更自然 - 避免 45deg 的绝对对角线，它容易和元素边框/文字基线形成摩尔纹；微调到 43deg 或 47deg 往往更稳
加一点透明度或叠加浅色层
纯色渐变本身对比强，尤其深色到深色时（如 #1a1a2e → #16213e），人眼难分辨过渡，会误以为“不平滑”。这时可引入轻微透明或柔光层辅助。
- 用
rgba()让起始/结束色略带透明（如rgba(79, 172, 254, 0.98)），让底层背景参与混合 - 或叠一层
backdrop-filter: blur(1px)（需配合background-clip: padding-box），轻微模糊边缘过渡 - 更稳妥的做法：在渐变上方加半透明白色 overlay：
background: linear-gradient(...), linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03));
基本上就这些。平滑不是靠加更多色标，而是让每一段过渡有呼吸感，角度有错位感，颜色有层次感。调的时候放大预览、换几台设备看看，比死盯代码更有效。
立即学习“前端免费学习笔记（深入）”；
