Logo
Blockies Animate.

Hover Glow Animation

FREE

A hover glow animation for elements

Demo

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates
All animations
No subscriptions
No hidden fees
$19.99
Payment once and get lifetime access

Hover Glow Animation

This is a hover glow animation that you can use for interactive elements.

Installation

1

Copy and paste the following code into your project.

Add the class hover-glow to the element you want to animate.

global.css
 
@layer utilities {
 
.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;
 }
 
}
2

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

<div class="hover-glow">
    <!-- Your content here -->
</div>