Mind-Blowing Animated Glowing Card Background Effect in Elementor | Easy WordPress Tutorial

Elementor 3.17 Update Broke My Forms — Here’s the Fix

Everything looks fine for about twelve seconds. Then the contact forms stop submitting. No error message. No console warning. Just… ...

My WordPress Site Got Hacked (Not My Fault — wp2shell Did It)

Someone just exploited a hole in WordPress core that lets them take over your server without logging in. Here's what ...

Elementor Update Just Broke My Site — Here’s How I Sorted It

Updated Elementor and your site broke? I walk through the actual fixes that worked when it happened to a client ...

How To Make A Vertical 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Showing Slide 1 of 5

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;
  }
}