渐变背景是前端页面里最出效果也最省资源的装饰手段之一。相比引入一张大图，纯CSS绘制的渐变不仅体积为零，还能随意调整颜色、位置和尺寸，配合动画甚至能做出流动的视觉体验。本文的目标很明确：用最少的HTML结构，实现一个由两个圆形径向渐变加一个矩形线性渐变叠加而成的炫酷背景效果。
一、先搞清楚渐变的两种基本形态
CSS里常用的渐变有两种：linear-gradient线性渐变和radial-gradient径向渐变。线性渐变沿一条直线过渡颜色，适合做背景底色、按钮高光；径向渐变从一个圆心向外扩散，天然适合模拟光斑、球体光晕。
线性渐变的基本写法是linear-gradient(角度, 颜色1, 颜色2, ...)，角度可以是to right这类方向关键字，也可以是45deg这样的具体度数。径向渐变的基本写法是radial-gradient(形状 大小 at 位置, 颜色1, 颜色2, ...)，例如radial-gradient(circle at 20% 30%, #ff6b6b, transparent 70%)表示一个圆心在左上区域的红色光斑，向外逐渐透明。
需要特别注意的是渐变里的transparent关键字。很多人直接写transparent会发现边缘发灰，原因是它等价于rgba(0,0,0,0)，过渡时会经过半透明的黑色。解决办法是使用与目标颜色同色系的透明值，比如红色光斑就写成rgba(255,107,107,0)，这样过渡才会干净。
二、多层背景叠加：实现渐变组合的关键机制
CSS的background属性天然支持多层背景，写法是用逗号分隔多个渐变值，浏览器会按书写顺序渲染，先写的在最上层。这就是我们实现双圆形加矩形组合的核心思路：把两个径向渐变画在上面，把线性渐变的矩形底色放在最下面。
配合background-size可以控制每一层渐变的实际尺寸，配合background-position可以控制每一层的位置，配合background-repeat设置是否平铺。多层背景时这些属性也支持逗号分隔，与渐变层一一对应。来看一个基础结构：
.gradient-bg {
/* 先写的层在上面 */
background:
radial-gradient(circle, rgba(255, 107, 107, 0.8), rgba(255, 107, 107, 0) 70%),
radial-gradient(circle, rgba(78, 205, 196, 0.8), rgba(78, 205, 196, 0) 70%),
linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size:
600px 600px,
500px 500px,
100% 100%;
background-position:
10% 20%,
90% 80%,
center;
background-repeat: no-repeat;
}这段代码里，两个圆形径向渐变分别是红色光斑和青色光斑，尺寸被限制在600px和500px的方形区域内，由于渐变本身是圆形且边缘透明，视觉上就是两个悬浮的彩色圆斑。最底层的线性渐变铺满整个容器，形成矩形底色。三层叠加，立刻就有了层次感。
调节时有一个实用技巧：把两个圆形的background-position设置在容器的对角位置（比如一个在左上、一个在右下），视觉平衡感最好。如果两个圆靠得太近，颜色会互相混合变脏，建议保持足够的距离。
三、加入动画让渐变真正炫起来
静态渐变只是及格线，加上动画才是炫酷的开始。由于background-position和background-size都是可动画属性，我们可以让两个圆形缓慢漂移，做出呼吸流动的效果。这里推荐用@keyframes定义关键帧：
@keyframes float1 {
0%, 100% { background-position: 10% 20%, 90% 80%, center; }
50% { background-position: 30% 60%, 70% 40%, center; }
}
@keyframes float2 {
0%, 100% { background-position: 10% 20%, 90% 80%, center; }
50% { background-position: 60% 10%, 20% 90%, center; }
}
.gradient-bg {
background:
radial-gradient(circle, rgba(255, 107, 107, 0.7), rgba(255, 107, 107, 0) 70%),
radial-gradient(circle, rgba(78, 205, 196, 0.7), rgba(78, 205, 196, 0) 70%),
linear-gradient(135deg, #1a2a6c 0%, #2a6c5f 50%, #1a2a6c 100%);
background-size: 600px 600px, 500px 500px, 100% 100%;
background-repeat: no-repeat;
animation: float1 12s ease-in-out infinite;
}
.gradient-bg:hover {
animation: float2 8s ease-in-out infinite;
}注意关键帧里的background-position必须写全三层的值，即使第三层矩形底色不变也要写center，否则动画会被判定无效。动画时长建议设置在8秒到15秒之间，太短会显得躁动，太长则看不出变化。
另外一种做法是给容器加一个旋转的伪元素：让::before承载一个巨大的锥形或线性渐变，用filter: blur()模糊后持续旋转，容器本身设置overflow: hidden。这种方案性能消耗稍高，但视觉上更接近流动的光雾效果，适合用在登录页等大面积背景场景。
四、完整可复制的示例与参数调节建议
下面是一个完整的最小示例，HTML只需要一个元素，复制即可运行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
height: 100vh;
background:
radial-gradient(circle, rgba(255, 107, 107, 0.75), rgba(255, 107, 107, 0) 70%),
radial-gradient(circle, rgba(78, 205, 196, 0.75), rgba(78, 205, 196, 0) 70%),
linear-gradient(135deg, #141e30, #243b55);
background-size: 60vmax 60vmax, 50vmax 50vmax, 100% 100%;
background-position: 15% 25%, 85% 75%, center;
background-repeat: no-repeat;
animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
from { background-position: 15% 25%, 85% 75%, center; }
to { background-position: 35% 60%, 65% 35%, center; }
}
</style>
</head>
<body>
</body>
</html>这个例子用vmax作为圆形尺寸单位，好处是圆斑大小会随视口自动缩放，在手机和桌面端都能保持合适的比例。暗色的线性渐变底（#141e30到#243b55）与两个亮色圆斑形成强对比，是这类效果最稳妥的配色策略。
调参时有几点经验：第一，圆斑透明度控制在0.6到0.8之间，太低看不出效果，太高会盖住底色层次；第二，径向渐变的终止位置写在70%左右，光斑边缘过渡最柔和；第三，如果想做品牌色，直接替换两个圆斑的rgba颜色值，保持底色为深色系即可。掌握了多层背景叠加这一个核心机制，你还可以扩展出三个圆、四个圆，或者叠加repeating-linear-gradient做出条纹光效，玩法完全由自己发挥。
CSS渐变linear-gradientradial-gradient修改时间：2026-09-06 16:58:36