多团径向渐变互相推挤变形，类似 Mesh Gradient
← 返回 背景 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .mesh{height:220px;border-radius:14px;background:#0d0d1a;position:relative;overflow:hidden}
.fx .mesh::before{content:"";position:absolute;inset:-30%;background:radial-gradient(closest-side,#f778ba,transparent),radial-gradient(closest-side,#4a9eff,transparent),radial-gradient(closest-side,#57ab5a,transparent);background-position:20% 30%,70% 60%,45% 80%;background-size:300px 300px,260px 260px,220px 220px;animation:kfx-mesh 10s ease-in-out infinite alternate;filter:blur(20px)}
@keyframes kfx-mesh{to{background-position:70% 20%,20% 70%,80% 40%}}<div class="fx">
<div class="mesh"></div>
</div>