CSS Animated Background (Elementor Tutorial)

August 4, 2021

In this video I will show you how to add CSS animated backgrounds to your Elementor widgets.

Elementor Pro isn’t required to follow this tutorial but it’s recommended.

Red Stapler:
https://redstapler.co/css-3d-card-design-rgb-effect-tutorial/

CSS Gradient:
https://cssgradient.io/

Timestamps:

0:00 Introduction
1:39 Elementor Backend Setup
3:03 Example 1 – Column Background
12:33 Example 2 – Hover Column Background
15:01 Example 3 – Button Widget Background
17:48 Bonus – Change Text Color On Hover

Column Background CSS Code:

				
					.bganimate::after {
  content:"";
  background: linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)
  repeat 0% 0% / 300% 100%;
  position: absolute;
  z-index:1;
  inset: 0px;
  filter: blur(20px);
  animation: bganimate 8s linear infinite;
}
@keyframes bganimate {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}}

Hover Column Background CSS Code:

				
					.bganimate2:hover::after {
  content:"";
  background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)
  repeat 0% 0% / 300% 100%;
  position: absolute;
  z-index:-1;
  inset: 0px;
  filter: blur(8px);
  animation: bganimate2 6s linear infinite;
}
@keyframes bganimate2 {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}}

Change Text Color On Hover:

				
					.bganimate2:hover h2, .bganimate2:hover p{color:#333!important;}

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post: