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.
- Start by creating a container.
- 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.
- Add: glow in the container’s CSS field
- 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