Creating a glowing effect in Elementor can add excitement to your design.
It is not very complicated to add background glow to your Elementor section.
- Start by creating a row and a column.
- Make sure you have no background color selected for the section or the column. If you do select a column color – the glow effect will appear around the column box. This also is a nice effect and can be used in various applications.
- Add: glow in the column CSS field
- Add the following CSS code.
.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, #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
