Hover Glow Animation

FREE

A hover glow animation for elements

Demo

Hover Glow
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Installation

1

Copy and paste the following code into your project.

Add the keyframes and animation to the global.css file.

global.css

@layer utilities {
  // START HERE ------------------------------------------------------------
  .hover-glow {
       position: relative;
       transition: all 0.3s ease;
  }

  .hover-glow::before {
       content: "";
       position: absolute;
       inset: -2px;
       background: linear-gradient(45deg, #3b82f6, #8b5cf6);
       border-radius: inherit;
       opacity: 0;
       transition: opacity 0.3s ease;
       z-index: -1;
       filter: blur(8px);
  }

  .hover-glow:hover::before {
         opacity: 0.7;
  }
  // END HERE ------------------------------------------------------------
}
2

Use the class hover-glow to apply the animation to an element.


<div className="backdrop-blur-sm">
  <div className="hover-glow">
      <!-- Your content here -->
  </div>
</div>
3

Start using the animation