After posting the Glowing Cursor Effect article, I wondered if there wasn’t a better way to do this using pseudo-elements. I hadn’t yet gone to look at the video from Hyperplexed that seemed to start this fad, but then Nicholas Arce posted his variation using Bricks Builder. If you have never watched a Nicholas Arce video, they are well thought out and articulated, making them easy to follow.

My version

I destroyed my previous version in the builder, which I thought would come back and bite me. Still, eventually, I figured out how to make this work using a multicolor radial gradient, as I had done before. Why was it so hard? If you follow Nic’s video, he sets the hover effect on the grid and not the card, so all the cards pick up the gradient colors, which wasn’t the effect I wanted. I realized that the key to this is ensuring the last step of your gradient is transparent and large enough to “hide” the effect on other cards. The effect can be seen on the homepage.

My code

I did a few different things with the variable and opted not to use a couple. If you are doing something similar, you may want to play with the gradient steps — I used steps of 10 in my final solution, but steps of 20 were also not bad. Additionally, you can play with the opacity of each step. Here is the custom CSS for the card.

%root% {
  --border-width: 2px;
  --border-radius: var(--radius-m);
  --outer-radius: calc(var(--border-radius) + var(--border-width));
  --border-glow-size: 400px;
  --glow-color:radial-gradient(var(--border-glow-size) circle at var(--mouse-x) var(--mouse-y), hsla(48, 97%, 50%, 1) 0%, hsla(27, 96%, 47%, 1) 10%, hsla(7, 96%, 45%, 1) 20%, hsla(286, 61%, 36%, 1) 30%, hsla(255, 69%, 48%, 1) 40%, transparent 60%);
  
}

%root%::after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 500ms;
  background: transparent;
  background: var(--glow-color)
}


#card-grid:hover %root%::after {
  opacity: 0.9;
}

%root%:hover .inner-content::after {
 background: var(--glow-color);
  opacity: .5;
  z-index:-1;
}