There is a CSS code that allows you to add a glow animated effect on Elementor.
The only problem is that it doesn’t work on Safari/iOs due to a “bug” that causes CPU over load.
The CSS code is the following:
/COLUMNS GLOW/
.glow > .elementor-widget-wrap{
position:relative;
}
.glow > .elementor-widget-wrap:after{
content:””;
position:absolute;
top:0;
left:0; right:0;
z-index:-1;
height:100%;
width:100%;
background: linear-gradient(270deg, #52a54a, #a3db73);
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, #52a54a, #a3db73);
background-size:200% 200%;
}
How to fix it?
The solution is the following code:
filter: blur(200px);
transform: translate3d(0, 0, 0);
The code forces the device to use GPU acceleration, thus eliminating the problem!
Credit to https://graffino.com/til/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari for figuring out about this issue
