In this video I will show you how to add CSS animated backgrounds to your Elementor widgets.
Elementor Pro isn’t required to follow this tutorial but it’s recommended.
Red Stapler:
https://redstapler.co/css-3d-card-design-rgb-effect-tutorial/
CSS Gradient:
https://cssgradient.io/
Timestamps:
- 0:00 Introduction
- 1:39 Elementor Backend Setup
- 3:03 Example 1 – Column Background
- 12:33 Example 2 – Hover Column Background
- 15:01 Example 3 – Button Widget Background
- 17:48 Bonus – Change Text Color On Hover
Column Background CSS Code:
.bganimate::after {
content:"";
background: linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)
repeat 0% 0% / 300% 100%;
position: absolute;
z-index:1;
inset: 0px;
filter: blur(20px);
animation: bganimate 8s linear infinite;
}
@keyframes bganimate {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}}
Hover Column Background CSS Code:
.bganimate2:hover::after {
content:"";
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)
repeat 0% 0% / 300% 100%;
position: absolute;
z-index:-1;
inset: 0px;
filter: blur(8px);
animation: bganimate2 6s linear infinite;
}
@keyframes bganimate2 {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}}
Change Text Color On Hover:
.bganimate2:hover h2, .bganimate2:hover p{color:#333!important;}
