mesh-gradient

Brand mesh gradient

Soft, slowly drifting color fields built from your own palette — atmosphere without the violet-cyan AI glow.

All modern browsers (CSS gradients + filter).

Use it for

A hero or one section that needs warmth behind real content
Brands with a defined palette of 3–5 colors close in lightness

Don't — this is how it turns into slop

Default violet/indigo/cyan on black — that is exactly the look Slopcheck flags
Behind glass cards or small text; combine with grain-overlay instead

Accessibility

Drift only runs without prefers-reduced-motion and is slow (40s) to avoid vestibular issues
Check text contrast against the brightest blob, not just the base color

Performance

One blurred pseudo-element, animated by transform only
Avoid stacking several mesh sections in one viewport

The code

/* Mesh gradient from YOUR palette — soft overlapping color fields that
   drift very slowly. The slop version is violet→indigo→cyan on black;
   this one is built from brand tokens and meant to be quiet. */
.mesh {
  /* Replace with your brand colors (kit palette). Keep them close in
     lightness so no single blob screams. */
  --mesh-base: #f4f1ea;
  --mesh-1: #f2c6a0;
  --mesh-2: #c8553d;
  --mesh-3: #9fb8ad;
  --mesh-4: #e8d9b5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--mesh-base);
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 20% 25%, var(--mesh-1), transparent 70%),
    radial-gradient(35% 45% at 80% 20%, var(--mesh-4), transparent 70%),
    radial-gradient(45% 55% at 70% 80%, var(--mesh-3), transparent 70%),
    radial-gradient(30% 40% at 25% 85%, var(--mesh-2), transparent 70%);
  filter: blur(40px) saturate(1.1);
  opacity: 0.75;
}

@keyframes mesh-drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-4%, 3%) rotate(8deg) scale(1.05); }
  100% { transform: translate(3%, -2%) rotate(-6deg) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .mesh--drift::before {
    animation: mesh-drift 40s ease-in-out infinite alternate;
  }
}

Which of these fit your site?

Scan your URL for free. The full review picks recipes for each section and hands your AI a complete design kit.

Check my site ↑