How to Create CSS Glow Effects (Neon, Soft, Animated)
Glow effects add atmosphere and focus to dark-mode interfaces. A neon button, a glowing card border, or a soft ambient light behind a heading can transform a flat design into something that feels alive. All of these are built with CSS box-shadow and text-shadow — no images required.
- Build neon glows, soft ambient lighting, and animated glow effects with CSS box-shadow and text-shadow.
- Covers neon glow effect.
- Covers neon text glow.
- Covers animated pulse glow.
- Covers performance tips.
Neon Glow Effect
The classic neon glow uses layered box-shadows with zero offset and increasing blur:
.neon-button {
box-shadow:
0 0 5px rgba(0, 255, 209, 0.4),
0 0 15px rgba(0, 255, 209, 0.2),
0 0 30px rgba(0, 255, 209, 0.1),
0 0 60px rgba(0, 255, 209, 0.05);
}
Each layer adds a softer, wider ring of light. The innermost layer is the brightest; the outermost is barely visible but adds atmospheric depth. Use your brand's accent color for the glow to create a cohesive look.
Neon Text Glow
For glowing text, use text-shadow instead of box-shadow:
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations..neon-text {
color: #00FFD1;
text-shadow:
0 0 7px rgba(0, 255, 209, 0.8),
0 0 20px rgba(0, 255, 209, 0.4),
0 0 40px rgba(0, 255, 209, 0.2);
}
The text itself should be the glow color, with the shadow layers creating the bloom around it. This works best on large, bold headings against dark backgrounds.
Animated Pulse Glow
A pulsing glow draws attention without being as aggressive as a flashing animation:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 10px rgba(0,255,209,0.3), 0 0 30px rgba(0,255,209,0.15); }
50% { box-shadow: 0 0 20px rgba(0,255,209,0.5), 0 0 50px rgba(0,255,209,0.25); }
}
.glow-pulse {
animation: pulse-glow 2s ease-in-out infinite;
}
Keep the pulse subtle — the shadow should breathe, not blink. Wrap in a prefers-reduced-motion check for accessibility. The CSS Glow Generator lets you build and preview all these effects visually.
Performance Tips
Glow effects using box-shadow are paint operations. For static glows, performance is fine. For animated glows, use the pseudo-element opacity trick: create the glow on a ::after element and animate its opacity rather than animating the shadow values directly. This allows the browser to composite the animation on the GPU rather than repainting the shadow on every frame.