How to Animated Mesh Gradient in WordPress and Elementor

Introduction to Mesh Gradients and Animation

Mesh gradients are modern, organic background effects that blend multiple colors into a soft, flowing gradient. Unlike linear or radial gradients, mesh gradients offer a more natural and abstract appearance—something increasingly popular in brand websites like Stripe.

Adding animation to mesh gradients enhances the visual engagement of a site. These subtle motions create an immersive feel and contribute to user retention. If you’ve seen the dreamy moving backgrounds on Stripe’s homepage, that’s exactly what we’re diving into.

And the good news? You can recreate this effect in WordPress using Elementor—without needing third-party animations or plugins.

The Role of Elementor in WordPress Design

Elementor is one of the most popular visual page builders for WordPress, allowing even non-coders to build professional websites. Its flexibility in adding custom CSS, motion effects, and global design systems makes it ideal for implementing animated mesh gradients.

With Elementor Pro, you can directly embed CSS into widgets or containers. Even if you’re using the free version, a simple HTML widget can do the trick.

How Stripe Uses Animated Mesh Gradients

Stripe’s website uses mesh gradients in the background of their hero sections. This stylistic choice isn’t just visual—it reflects their innovative brand identity. Their gradients move gently, utilizing @keyframes, variable coordinates, and clip-path to create abstract animation. These elements don’t overwhelm the visitor but still convey energy and creativity.

We’re going to emulate that approach step-by-step.

Prerequisites Before You Start

Here’s what you’ll need:

• A working WordPress website
• The Elementor plugin (Free or Pro)
• Optional: Elementor Pro for easier CSS insertion
• Access to the Theme Customizer or a child theme (for global CSS)

Create a new section in Elementor, give it a unique ID like #mesh-gradient, and prepare to insert some CSS.

Understanding the CSS Code for Mesh Gradients

Let’s break down the CSS used:

#mesh-gradient {
  position: relative;
  overflow: hidden;
  background-color: hsla(6, 83%, 57%, 1);
  background-image:
    radial-gradient(at var(--p1-x,71%) var(--p1-y,70%), hsla(228,76%,60%,1) 0, transparent 50%),
    radial-gradient(at var(--p2-x,54%) var(--p2-y,25%), hsla(114,100%,33%,1) 0, transparent 50%),
    radial-gradient(at var(--p3-x,74%) var(--p3-y,94%), hsla(33,89%,74%,1) 0, transparent 50%),
    radial-gradient(at var(--p4-x,40%) var(--p4-y,77%), hsla(29,92%,58%,1) 0, transparent 50%),
    radial-gradient(at var(--p5-x,58%) var(--p5-y,67%), hsla(344,98%,40%,1) 0, transparent 50%);
  background-size: 200% 200%;
  animation: gradient 30s ease-in-out infinite;
  clip-path: polygon(100% 0, 100% 60%, 50% 100%, 0 60%, 0 0);
}

@media (max-width: 768px) {
  #mesh-gradient {
    clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
    -webkit-clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
  }
}

@keyframes gradient {
  0% {
    --p1-x: 71%; --p1-y: 70%;
    --p2-x: 54%; --p2-y: 25%;
    background-position: 0% 20%, 100% 80%, 50% 30%, 0% 60%, 100% 40%;
  }
  15% {
    background-position: 80% 40%, 20% 90%, 60% 10%, 30% 70%, 70% 20%;
  }
  37% {
    background-position: 40% 80%, 90% 30%, 10% 60%, 80% 10%, 50% 90%;
  }
  63% {
    background-position: 20% 40%, 70% 10%, 90% 70%, 10% 30%, 30% 80%;
  }
  100% {
    background-position: 0% 20%, 100% 80%, 50% 30%, 0% 60%, 100% 40%;
  }
}

Applying the Mesh Gradient Code in Elementor

1. Add the Custom ID to Container

In Elementor:

• Select the container or section
• Go to Advanced > CSS ID
• Enter mesh-gradient

2. Add the CSS

For Elementor Pro Users:

• Paste the CSS under Advanced > Custom CSS

For Free Users:

• Drag an HTML widget
• Wrap the CSS in <style> tags

<style>
/* Insert CSS here */
</style>

Responsive Design Adjustments

Mobile views need special treatment. The original CSS includes media queries:

@media (max-width: 768px) {
  #mesh-gradient {
    clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
  }
}

Make sure to test your site on multiple devices and tweak the clip-path if necessary.

Enhancing the Animation Experience

Here’s how to refine the animation:

• Duration: Change from 30s to 15s for faster transitions
• Easing: Use ease-in-out for smooth looping
• Custom Stops: Add more keyframe stages for complexity

These tweaks bring your mesh gradient to life.