Gradient Blobs Background
Three organic blobs with gradient fills morph their outlines and drift, darkening where they overlap like ink on paper. The shapes come from animated eight-value border-radius.
Also known as: gradient blob animation css, animated blob background css, morphing blob background.
HTML
<div class="bgx-gradient-blobs" aria-hidden="true"><span></span><span></span><span></span></div>
CSS
.bgx-gradient-blobs {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: oklch(from var(--c) 0.985 0.008 calc(h + 0));
isolation: isolate;
}
.bgx-gradient-blobs span {
position: absolute;
left: var(--x);
top: var(--y);
width: max(12em, 27%);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 42% 58% 62% 38% / 44% 38% 62% 56%;
background: linear-gradient(var(--a), var(--from), var(--to));
opacity: 0.85;
mix-blend-mode: multiply;
animation:
bgx-gradient-blobs-morph var(--t) ease-in-out var(--d) infinite alternate,
bgx-gradient-blobs-drift calc(var(--t) * 1.6) ease-in-out var(--d) infinite alternate;
}
.bgx-gradient-blobs span:nth-child(1) { --x: 18%; --y: 32%; --a: 135deg; --from: oklch(from var(--c) 0.8 0.14 calc(h + 0)); --to: oklch(from var(--c) 0.74 0.17 calc(h + 60)); --t: 7s; --d: -2s; }
.bgx-gradient-blobs span:nth-child(2) { --x: 80%; --y: 30%; --a: 200deg; --from: oklch(from var(--c) 0.86 0.13 calc(h + 120)); --to: oklch(from var(--c) 0.78 0.15 calc(h + 170)); --t: 8.5s; --d: -5s; }
.bgx-gradient-blobs span:nth-child(3) { --x: 52%; --y: 80%; --a: 60deg; --from: oklch(from var(--c) 0.84 0.11 calc(h - 60)); --to: oklch(from var(--c) 0.72 0.15 calc(h - 20)); --t: 9.5s; --d: -1s; }
@keyframes bgx-gradient-blobs-morph {
0% { border-radius: 42% 58% 62% 38% / 44% 38% 62% 56%; }
50% { border-radius: 64% 36% 41% 59% / 57% 62% 38% 43%; }
100% { border-radius: 36% 64% 55% 45% / 38% 51% 49% 62%; }
}
@keyframes bgx-gradient-blobs-drift {
from { transform: translate(-8%, 5%) rotate(0deg); }
to { transform: translate(9%, -7%) rotate(50deg); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-gradient-blobs, .bgx-gradient-blobs *, .bgx-gradient-blobs::before, .bgx-gradient-blobs::after, .bgx-gradient-blobs *::before, .bgx-gradient-blobs *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.