Introduction
The glow effect is one of the most popular effects in modern web design. It gives your buttons a premium, futuristic look, immediately catching the user's attention.
In this tutorial, we will explore 5 different variations of the glow effect, from the simplest to the most elaborate. Each example comes with the complete code you can copy and adapt to your project.
The glow effect mainly uses the box-shadow property. This property is supported by all modern browsers without a prefix.
1. Basic hover glow
Let's start with the simplest version: a glow that appears on mouse hover. This is the ideal implementation if you want a subtle, non-intrusive effect.
.btn-glow {
padding: 16px 32px;
font-size: 1rem;
font-weight: 600;
background: #6366f1;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
/* Visible base glow */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}
.btn-glow:hover {
/* Intensified glow on hover */
box-shadow: 0 0 40px rgba(99, 102, 241, 0.8);
transform: translateY(-2px);
}How it works
The box-shadow property accepts several parameters:
- X and Y offset (0 0): Keep at zero so the glow is centered around the button
- Blur radius (20px/40px): The larger this value, the more diffuse the glow
- Color with opacity: Use
rgba()to control the intensity
2. Looping animated glow
To attract even more attention, let's add an animation that makes the glow pulse continuously. This is perfect for important call-to-action buttons.
.btn-glow-animated {
padding: 16px 32px;
background: #6366f1;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
/* Infinite loop animation */
animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}
50% {
box-shadow:
0 0 40px rgba(99, 102, 241, 0.8),
0 0 60px rgba(99, 102, 241, 0.4);
}
}
/* Pause animation on hover for feedback */
.btn-glow-animated:hover {
animation-play-state: paused;
box-shadow: 0 0 50px rgba(99, 102, 241, 1);
}Looping animations can be bothersome for some users. Remember to use @media (prefers-reduced-motion: reduce) to disable them if the user has set this preference.
3. Gradient glow
For an even more sophisticated effect, let's combine a gradient background with a two-color glow. This technique creates a very elegant depth effect.
.btn-glow-gradient {
padding: 16px 32px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
animation: glowGradient 3s ease-in-out infinite;
}
@keyframes glowGradient {
0%, 100% {
box-shadow:
0 0 20px rgba(99, 102, 241, 0.5),
0 0 40px rgba(139, 92, 246, 0.3);
}
50% {
box-shadow:
0 0 30px rgba(139, 92, 246, 0.6),
0 0 60px rgba(99, 102, 241, 0.4);
}
}4. Neon Effect
The neon effect is a popular variant that combines an external glow with a text-shadow and a colored border. The result is reminiscent of retro neon signs.
.btn-neon {
padding: 16px 32px;
background: transparent;
color: #00ff88;
border: 2px solid #00ff88;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
/* Text glow */
text-shadow: 0 0 10px #00ff88;
/* External + internal glow */
box-shadow:
0 0 20px rgba(0, 255, 136, 0.3),
inset 0 0 20px rgba(0, 255, 136, 0.1);
}
.btn-neon:hover {
background: #00ff88;
color: #0a0a0f;
text-shadow: none;
box-shadow:
0 0 40px rgba(0, 255, 136, 0.6),
0 0 80px rgba(0, 255, 136, 0.3);
}5. Animated Rainbow Glow
To finish with a flourish, here is a spectacular effect: a glow that changes color following an animated rainbow gradient. Use sparingly!
.btn-rainbow {
padding: 16px 32px;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
/* Animated gradient */
background: linear-gradient(
90deg,
#ff0080,
#ff8c00,
#40e0d0,
#ff0080
);
background-size: 300% 100%;
animation: rainbowGlow 4s linear infinite;
}
@keyframes rainbowGlow {
0% {
background-position: 0% 50%;
box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
}
33% {
box-shadow: 0 0 20px rgba(255, 140, 0, 0.5);
}
66% {
box-shadow: 0 0 20px rgba(64, 224, 208, 0.5);
}
100% {
background-position: 300% 50%;
box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
}
}Best practices
Before wrapping up, here are some recommendations for using glow effects effectively:
Performance
- Limit the number of elements with animated glow on the same page
- Use
will-change: box-shadowif you have performance issues - Prefer transitions over animations when possible
Design
- Maintain consistency: use the same colors as your brand guidelines
- Dark background recommended: glows stand out better on dark backgrounds
- Only one glow CTA per section to avoid diluting attention
Accessibility
/* Disable animations for sensitive users */
@media (prefers-reduced-motion: reduce) {
.btn-glow-animated,
.btn-glow-gradient,
.btn-glow-rainbow {
animation: none;
}
}Conclusion
The glow effect is a powerful tool to highlight your buttons and CTAs. By mastering box-shadow and @keyframes, you can create an infinite number of variations suited to your design.
Don't hesitate to experiment with values and colors to find the perfect effect for your project. And remember: subtlety is often more effective than excess!
Find 27 ready-to-use button effects in our effects library, with one-click copyable code.