BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro extension

Animated Gradient for Elementor Pro

A slowly moving gradient background for any container

Overview

What Animated Gradient does

Animated Gradient gives a container, section or column a gradient of two to four colors that drifts slowly back and forth. You set the colors, the angle and how long one cycle takes. It is made with CSS only, so no script runs for it.

Live demo

See it in action

An animated gradient behind this container

Features

What it can do

  • Two to four colors in one gradient.

  • Angle from 0 to 360 degrees.

  • Cycle time from 2 to 120 seconds.

  • CSS only: no script is needed for the movement.

  • The gradient is part of the stylesheet of the page, so it is there from the first paint.

  • The movement stops for visitors who ask their system for reduced motion.

Use cases

When to use it

Hero background

Give the top section of a landing page a slow gradient behind the headline.

Call to action block

Make a sign up container stand out with moving brand colors.

Card background

Use a short cycle and two close colors for a gentle shimmer on a pricing card container.

Setup

How to set it up

A few steps from adding the extension to a finished result.

  1. Select a container, section or column, open the Advanced tab and open the section Bright: Animated Gradient.

  2. Switch on Animated Gradient.

  3. In the Style tab, set the background type of the element to None so the gradient is not covered.

  4. Pick First Color and Second Color, and add Third Color and Fourth Color if you want more.

  5. Set Angle for the direction of the gradient.

  6. Set One Cycle Takes (seconds). A higher number gives a slower movement.

FAQ

Questions and answers

Why can I not see the gradient?

The element probably has its own background. Set the background type of the element to None so the gradient is not covered.

Do I have to use four colors?

No. Two colors are enough. Empty third and fourth colors repeat the first and second.

Does it slow the page down?

It uses a CSS animation and no script. The small stylesheet for it loads only on pages where a container uses the gradient.

Bright Addons Pro

Get Animated Gradient with Bright Addons Pro

Bright Addons Pro has 77 Pro widgets plus all 48 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $16 a year, with a 14-day money-back guarantee.