Add Animated (Moving) Gradient Effect in any Elementor Section

Elementor CSS July 23, 2026

Steps:

  1. Give section a class: bpers-animated-section
  2. Add this custom CSS
.bpers-animated-section {
    background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ffdf85, #b8de6f, #4bda6c, #3ad5a4, #54cad8, #9bb8f4, #d7aefc);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
}
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

Hurrah – Done