Mesh Gradient

Soft blobs of color melt into each other and drift slowly — a premium background

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Drift speed 16s Softness (blur) 42px Tone gray

Code

<div class="mesh">
  <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  <!-- 内容放在 .mesh 之上的一层 -->
</div>
<style>
.mesh { position: relative; overflow: hidden; background: #eceae5; }
.blob { position: absolute; border-radius: 50%; filter: blur(42px); }
.b1 { width: 55%; height: 70%; left: -8%; top: -15%; background: #d9d6cf; animation: drift1 16s ease-in-out infinite alternate; }
.b2 { width: 50%; height: 65%; right: -6%; top: 8%; background: #a9a69e; animation: drift2 16s ease-in-out infinite alternate; }
.b3 { width: 46%; height: 60%; left: 22%; bottom: -22%; background: #6d6b64; opacity: .55; }
@keyframes drift1 { to { transform: translate(9%, 7%) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-8%, 10%) scale(1.08); } }
</style>

<div class="relative overflow-hidden bg-[#eceae5]">
  <div class="absolute -left-[8%] -top-[15%] h-[70%] w-[55%] rounded-full blur-[42px] bg-[#d9d6cf] animate-[drift1_16s_ease-in-out_infinite_alternate]"></div>
  …
</div>
<!-- keyframes drift1/drift2 在 tailwind.config 里补 -->

export function MeshBackground() {
  return (<div style={{ position: "relative", overflow: "hidden", background: "#eceae5" }}>
    <div style={{ position: "absolute", width: "55%", height: "70%", left: "-8%", top: "-15%",
      borderRadius: "50%", filter: "blur(42px)", background: "#d9d6cf" }} />
    {/* 其余色块同理；漂移动画用 CSS @keyframes drift（见 html-css 档） */}
  </div>);
}

Code snippets are MIT-licensed — copy and adapt freely.

How this effect works

它是怎么工作的（中文）

几团大色块各自定位、加一个大 blur 滤镜，边缘就融化在一起了；再让每团以不同速度微微漂移，背景就像活的一样。性能提示：blur 半径越大越吃 GPU，漂移用 transform 实现，别动 left/top。本站版本只用灰阶演示，换品牌色时记得压暗饱和度。

How it works (English)

Position several large color blobs, give each a heavy blur filter, and their edges melt together; drift each at a different speed with transform and the background feels alive. Performance note: large blur radii are GPU-hungry; animate transform only, never left/top. This site's demo stays grayscale — if you swap in brand colors, keep saturation low.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Mesh Gradient PromptStale · →