How to create an animated glowing background effect in Elementor

date

February 5, 2023

categories

Web Design Tips

share

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

Latest Posts

SEO Web Design Tips

How To Write A Well-Performing Blog Post

Are you looking to write a blog post that is engaging and well-performing in terms of SEO? With a few…read more