How to create Animated glowing background with Elementor and CSS

0

Creating an animated Glowing background it very easy. We just need some css knowledge.

First add your section and devide the column just like you want. Then add the elements and background and padding just like you want.

We need to set the z-index value to a higher value. Lets use 2

Lets give our column a css class. In my case it will be called “glow”. Now if we inspect our column in browser we will see Elementor use a wrapping div called “elementor-column-wrap” . we need to target that and add some css. So lets go to our css editor.
.glow > .elementor-column-wrap{
position:relative;
}

We have made the elementor-column-wrap position to relative.Perfect! Now we will add the background gradient color.
To do it we will target the “elementor-column-wrap” and add ::after pseudo-class.
So lets do that.

.glow > .elementor-column-wrap:after{
content:"";
  position:absolute;
  top:0;
  left:0; right:0;
  z-index:-1;
  height:100%;
  width:100%;
background: linear-gradient(270deg, #0fffc1, #7e0fff);
  filter:blur(100px);
  transform:scale(.9);
  background-size:200% 200%; 
  animation: animateGlow 3s ease infinite;
  
}

Here we have set the z-index to -1 so that it sits under our main column.
For the background we have used a linear gradient. You have to use your own gradient color here.

We also have added a 100px “Blur” filter, to make it blurry.
Then we made the background size bigger.

And lastly we have added a CSS animation property so that we can animate the gradient. Great!

So lets make the animation now.

@keyframes animateGlow{
  0%{ background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}

}
Here you can see we have set the background position in 3 step. first at 0%, then 50% and then 100%. So our animation is done. 🙂 You can also add this animation to your button as well if you wish.
.glow_btn .elementor-button-link{
animation: animateGlow 3s ease infinite;
  background: linear-gradient(270deg, #0fffc1, #7e0fff);
    background-size:200% 200%; 
  
}
So here is all of our codes together.
.glow > .elementor-column-wrap{
position:relative;
}

.glow > .elementor-column-wrap:after{
content:"";
  position:absolute;
  top:0;
  left:0; right:0;
  z-index:-1;
  height:100%;
  width:100%;
background: linear-gradient(270deg, #0fffc1, #7e0fff);
  filter:blur(100px);
  transform:scale(.9);
  background-size:200% 200%; 
  animation: animateGlow 3s ease infinite;
  
}

@keyframes animateGlow{
  0%{ background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}

}

.glow_btn .elementor-button-link{
animation: animateGlow 3s ease infinite;
  background: linear-gradient(270deg, #0fffc1, #7e0fff);
    background-size:200% 200%; 
  
}

Now check the final result !!!

Check the video tutorial here.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More