CSS Animation Example: Animated Mesh Gradient

The "Animated Mesh Gradient" provides a lush, fluid background that replaces static colors with soft, organic, melting blobs of color.

Beautiful Backgrounds

There is currently no native CSS way to animate between complex multi-stop gradients smoothly. Instead, we fake the mesh gradient effect by drawing individual HTML <div> elements and assigning them a radial-gradient() background that fades to transparent at the edges.

We wrap these blobs in a parent container and apply a massive blur(40px) to it via the filter property. This destroys the hard edges of the blobs and causes their colors to "bleed" and mix together.

From there, we simply assign an @keyframes block to slowly drift and scale each orb. We stagger them using different animation-duration and animation-delay values to ensure the pattern never looks like a synchronized repeating loop.

Here is the code to create the Animated Mesh Gradient.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
}

.mesh-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    background-color: #2b4162;
    z-index: 0;
}

/* Base style for blending multiple orbs together smoothly */
.mesh-container {
    filter: blur(40px); /* Heavy blur to blend the orbs into a mesh */
}

/* Individual color orbs */
.mesh-orb {
    position: absolute;
    border-radius: 50%;
    animation: orb-drift 8s infinite alternate ease-in-out;
}

.mesh-orb.orb-1 {
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, #fa9c7a, transparent 70%);
    top: -10%;
    left: -10%;
    animation-duration: 10s;
}

.mesh-orb.orb-2 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #e9edc9, transparent 70%);
    bottom: -10%;
    right: -10%;
    animation-delay: -2s;
    animation-duration: 8s;
}

.mesh-orb.orb-3 {
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, #38618c, transparent 70%);
    top: 20%;
    left: 40%;
    animation-duration: 12s;
    animation-delay: -4s;
}

@keyframes orb-drift {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.3) translate(20%, -20%); }
    100% { transform: scale(0.8) translate(-15%, 25%); }
}

/* Overlay content */
.mesh-content {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@media (prefers-reduced-motion: reduce) {
    .mesh-orb {
        animation: none; /* Stops the animated drift */
    }
}
</style>

<div class="mesh-content">Beautiful Backgrounds</div>

View Output

Accessibility Considerations

While slow, continuous background motion can be distracting for some users, making it hard to concentrate on the text above it. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion.

It's best practice to stop the gentle drifting completely for users with the prefers-reduced-motion setting enabled. Even with the animation disabled, a static mesh gradient can still be highly attractive!

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .mesh-orb {
        /* Turn off the drifting blobs completely */
        animation: none; 
    }
}