Mind-Blowing Animated Glowing Card Background Effect in Elementor | Easy WordPress Tutorial
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
Alternatively
You can download the complete template here
The Following code goes into the Card Container ( OUT GLOW ONLY – Animated Border ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
transition: all 0.8s ease-in-out;
}
selector::before, selector::after{
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
The Following code goes into the Card Container ( OUT GLOW ONLY – On Hover ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
transition: all 0.8s ease-in-out!important;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
position: absolute;
transition: all 0.8s ease-in-out!important;
}
selector:hover::before, selector:hover::after{
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector:hover::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
The Following code goes into the Card Container ( WHOLE CARD GLOW – On Hover ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
transition: all 0.8s ease-in-out!important;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
position: absolute;
transition: all 0.8s ease-in-out!important;
}
selector:hover::before, selector:hover::after{
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector > div:hover{
background-color: transparent!important;
transition: all 0.8s ease-in-out!important;
}
selector:hover::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
The Following code goes into the Card Container ( WHOLE CARD GLOW – On Hover, PLUS Animated border ):
selector{
--first-color: #B96DED;
--second-color: #6DEDA3;
--third-color: #EDBE6D;
--size-of-blur : 40px;
--spin-speed : 2.5s;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
transition: all 0.8s ease-in-out;
}
selector::before, selector::after{
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 45%, var(--third-color));
animation: spin var(--spin-speed) linear infinite;
opacity: 1;
}
selector > div:hover{
background-color: transparent!important;
transition: all 0.8s ease-in-out!important;
}
selector::after {
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(var(--size-of-blur));
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
Other Articles
Transform Your Website with This FIRST EVER Animated Inner Border Effect In Elementor | WordPress Tutorial
https://youtu.be/bfAqAQnJO7E So if you follow along in the video, I refer to this blog post for you to enter code ...
Ignite Your Website with a Fiery Animated Cursor Trail Effect in Elementor | WordPress Tutorial
https://youtu.be/sLSE2L0zKZg So if you follow along in the video, I refer to this blog post for you to enter code ...
Create a Mesmerizing Animated Custom Cursor in Elementor
https://youtu.be/re_LUiEHx1U So if you follow along in the video, I refer to this blog post for you to enter code ...
Dazzle Your Visitors with This Animated Glowing Button Background Effect in Elementor
https://youtu.be/s3kOkTYZDBY So if you follow along in the video, I refer to this blog post for you to enter code ...