How to create an animated glowing background effect in Elementor

February 5, 2023

Create glowing background effect in Elementor

Creating a glowing effect in Elementor can add excitement to your design.

It is not very complicated to add background glow to your Elementor container.

  1. Start by creating a container. 
  2. Make sure you have no background color selected for the container.  If you do select a container color – the glow effect will appear around the container itself.  This also is a nice effect and can be used in various applications.
  3. Add: glow in the container’s CSS field
    Glow Blog
  4. Add the following CSS code.
				
					.elementor-element .glow {
position:relative;
}
.elementor-element .glow:after{
content:"";
  position:absolute;
  top:0;
  left:0; right:0;
  z-index:-1;
  height:100%;
  width:100%;
background: linear-gradient(270deg, #56ab2f, #004e92);
  filter:blur(100px);
  transform:scale(.9);
  background-size:150% 150%; 
  animation: animateGlow 7s ease infinite;
}
@keyframes animateGlow{
  0%{ background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
				
			

You can change the colors, timing and background size as needed.  Adjust these settings to achieve the results you are looking for. 

SAMPLE SECTION GLOWING EFFECT