Hover Glow Animation
FREE
A hover glow animation for elements
Demo
Exclusive Launch 50% offspots left: 0 / 50
$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.
@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
