RGB Animated Gradient Background in Elementor & Gutenberg — No Plugins Needed

RGB Animated Gradient Background in Elementor & Gutenberg — No Plugins Needed

Design trends are always evolving, but one effect that never goes out of style is the animated gradient background. It gives your website a sense of depth, movement, and modern flair.

The good news? You don’t need to install any plugin or use heavy animations. With just a few lines of CSS and a simple class name, you can create a smooth RGB animated gradient background in both Elementor and Gutenberg.

This guide is written in a simple, step-by-step way so that even if you’re not a coding expert, you’ll be able to set it up in a few minutes.

RGB Animated Gradient Background Look Like That

Smooth Gradient Animation

This block shows a slow RGB gradient background using the rgb-elem class.

Smooth Gradient Animation

This block shows a slow RGB gradient background using the
rgb-elem class.

Why Add an Animated Gradient Background?

Before jumping into the code, let’s understand why this effect is so popular.

• Eye-catching design: A moving background instantly grabs attention.
• Lightweight: Unlike videos or GIFs, gradients are pure CSS and load instantly.
• Customizable: You can choose any colors, adjust the speed, and even the direction.
• Works anywhere: Elementor, Gutenberg, or even a plain HTML block.
• No plugins: Keeps your site fast and secure.

If you want your hero section, banner, or even a footer area to stand out, this effect is perfect.

Step 1: Add the CSS Code

First, we need to place the CSS in WordPress.

• Go to your WordPress dashboard.
• Navigate to Appearance → Customize → Additional CSS.
• Copy and paste the following code:

/* ===========================
   RGB Animated Gradient Background
   Class: rgb-elem
   =========================== */

.rgb-elem {
  background: linear-gradient(270deg, 
    #ff0000,  /* Red */
    #00ff00,  /* Green */
    #0000ff,  /* Blue */
    #ffff00,  /* Yellow */
    #ff00ff,  /* Magenta */
    #00ffff   /* Cyan */
  );
  background-size: 1200% 1200%;
  animation: gradientMove 180s ease infinite;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* Keyframes for movement */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Accessibility: disable animation for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .rgb-elem {
    animation: none;
    background-position: 50% 50%;
  }
}

What does this code do?

• linear-gradient(270deg, …) → creates the rainbow-like gradient.
• background-size: 1200% 1200% → makes the gradient wide enough to move smoothly.
• animation: gradientMove 180s ease infinite; → animates the background very slowly (180 seconds per loop).
• @media (prefers-reduced-motion: reduce) → respects accessibility for users who don’t like animations.

Step 2: Apply in Elementor

1. Open your page with Elementor.
2. Click on the section, column, or widget where you want the gradient.
3. Go to the Advanced tab.
4. Find CSS Classes and type: rgb-elem
5. Update the page.

Now, when you view the page, the background will flow with a smooth animated RGB gradient.

Step 3: Apply in Gutenberg

If you’re using the default WordPress block editor (Gutenberg):

1. Open the page or post in Gutenberg.
2. Select a Group block or Cover block (these work best for backgrounds).
3. On the right sidebar, expand Advanced → Additional CSS Class(es).
4. Enter: rgb-elem
5. Save or update.

Preview your page, and you’ll see the same slow gradient background effect applied.

Step 4: Customize the Effect

The best part about animated background CSS is that it’s fully customizable. Here are some ideas:

• Change speed:
  • Faster → 60s instead of 180s
  • Ultra slow → 240s or more
• Change direction:
  • Left to right: 270deg
  • Top to bottom: 180deg
  • Diagonal: 135deg
• Change colors: Replace hex codes with your brand colors. Example: background: linear-gradient(270deg, #ff7e5f, #feb47b, #6a11cb, #2575fc);

Accessibility & Best Practices

Animations are attractive, but we should also think about usability:

• Readability: Always check that your text remains visible over the background. If needed, add a slight overlay with: .rgb-elem::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.15); /* darkens slightly */ border-radius: inherit; pointer-events: none; } .rgb-elem { position: relative; }
• Performance: Since this is CSS-based, it’s lightweight. But keep animations slow (180s or more) so the browser doesn’t waste resources.
• Reduced Motion: Our code already respects user system settings, disabling animations for those sensitive to motion.

Example Use Cases

• Hero Section: Make your homepage banner stand out with a flowing gradient.
• Call-to-Action: Highlight “Sign Up” or “Contact Us” blocks.
• Footer Highlight: Give your footer a modern twist without adding images.

Final Thoughts

With just one class (rgb-elem) and a few lines of CSS, you can add a beautiful RGB animated gradient background to Elementor or Gutenberg — no plugins required.

This solution is:

• Lightweight
• Easy to implement
• Fully customizable
• Accessible for all users

If you’re looking to make your WordPress site look more modern without slowing it down, this is one of the best tricks to try.