neon glow pulse shadow text retro neon sign text effect for headings glowing border effect for featured elements retro cyberpunk UI accent text needs dramatic visual impact want neon sign effect without canvas need pulsing glow border in pure CSS
Neon Glow
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/neon-glow.json Neon
Glowing panel edge
Background
Customize
Quick Start
<h1 class="neon-glow text-4xl font-bold text-white">Neon</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 985 bytes · 41 lines
- Custom Properties
-
--neon-color--neon-size--neon-speed - Classes
-
.neon-glow.neon-glow-box
neon glow pulse shadow text retro
Two variants: .neon-glow for text (text-shadow based) and .neon-glow-box for containers (box-shadow based). Both pulse between dim and bright states.
Neon heading and card
<h1 class="neon-glow text-5xl font-bold text-white">Hello Neon</h1>
<div class="neon-glow-box rounded-xl border border-white/10 p-6 mt-4">
<p class="text-white">Glowing container</p>
</div>