live - 60fps 1920 x 1080
<!DOCTYPE html>
<html>
<head>
<title>Mesh Gradient Flow</title>
<style>
:root {
--bg-color: #05070d;
--blob-1: #6366f1;
--blob-2: #ec4899;
--blob-3: #06b6d4;
--blob-4: #8b5cf6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
height: 100vh;
background: var(--bg-color);
overflow: hidden;
}
.mesh {
position: absolute;
inset: -20%;
filter: blur(60px) saturate(1.4);
}
.blob {
position: absolute;
width: 55vw;
height: 55vw;
border-radius: 50%;
mix-blend-mode: screen;
opacity: 0.85;
will-change: transform;
}
.b1 { background: radial-gradient(circle at center, var(--blob-1), transparent 60%); top: -10%; left: -5%; animation: drift1 18s ease-in-out infinite; }
.b2 { background: radial-gradient(circle at center, var(--blob-2), transparent 60%); top: 10%; right: -10%; animation: drift2 22s ease-in-out infinite; }
.b3 { background: radial-gradient(circle at center, var(--blob-3), transparent 60%); bottom: -15%; left: 15%; animation: drift3 20s ease-in-out infinite; }
.b4 { background: radial-gradient(circle at center, var(--blob-4), transparent 60%); bottom: 5%; right: 10%; animation: drift4 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(20vw,10vh) scale(1.15); } 66% { transform: translate(8vw,25vh) scale(0.9); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-18vw,15vh) scale(0.95); } 66% { transform: translate(-8vw,-12vh) scale(1.2); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(15vw,-15vh) scale(1.1); } 66% { transform: translate(-10vw,-8vh) scale(0.95); } }
@keyframes drift4 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-12vw,-18vh) scale(1.15); } 66% { transform: translate(10vw,10vh) scale(0.9); } }
/* Fine grain overlay for a premium, non-flat finish */
.grain {
position: absolute;
inset: 0;
opacity: 0.06;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.blob { animation: none; }
}
</style>
</head>
<body>
<div class="mesh">
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
<div class="blob b4"></div>
</div>
<div class="grain"></div>
</body>
</html>About this animation
A soft, flowing mesh gradient of drifting color blobs with a fine grain finish — the premium hero background look used by modern SaaS sites.
Related
