Neon Glow Buttons — Free HTML CSS Snippet

Neon glow buttons are a defining aesthetic of cyberpunk, gaming, crypto, and dark-themed interfaces — pair them with glitch text and a matrix rain background for the full effect. The glowing outline effect simulates the look of real neon tube signage — a coloured border with light spilling outward and inward. The entire effect is achieved with CSS box-shadow and text-shadow — no SVG, no canvas, no images.

How the neon effect works

Each button has a transparent background, a 2px solid coloured border, and multiple box-shadow layers. The default state uses: box-shadow: 0 0 8px color33, inset 0 0 8px color11 — a soft outer glow and a faint inner glow. The text-shadow: 0 0 8px color makes the text itself appear to emit light.

On :hover, the shadows intensify with three layers: 0 0 20px color8 (tight halo), 0 0 40px color5 (wider spread), and inset 0 0 20px color3 (inner fill). The text-shadow also doubles. The all: 0.2s transition makes both states animate smoothly.

The four colour variants

The four variants — cyan (#0ff), pink (#ff2d78), green (#39ff14), and purple (#bf5fff) — use the same shadow pattern with each variant's base colour. To add a new colour, copy a variant block and replace the colour value throughout.

Why the background is transparent

Neon tubes glow against a dark background — the contrast between the dark fill and the glowing edge is what creates the neon illusion. A solid fill would hide the inner glow and reduce the contrast that makes the effect work. The dark page background (#050810) is the minimum contrast needed for the glow to read.

Adding the effect to any button

Copy the .neon base CSS and one colour variant CSS block onto any button — including a gradient button. The only requirement is a dark background — the effect degrades on light backgrounds where glow is less visible.

The layered box-shadow technique

Neon glow is not a single box-shadow — it is three or four layers at increasing blur radii. Example for cyan: box-shadow: 0 0 4px #0ef, 0 0 12px #0ef, 0 0 28px #0ef, 0 0 56px rgba(0,238,255,0.4). The innermost shadow (4px) creates the bright core. Progressively larger radii create the mid-glow and outer ambient spread. Each layer uses the same hue but the outermost uses rgba with reduced opacity for a natural fade. The same layered technique applies to text-shadow for neon text effects.

Combining box-shadow and text-shadow

For fully neon-glowing buttons, apply layered box-shadow on the button element and layered text-shadow on the button's text content. text-shadow: 0 0 4px #0ef, 0 0 8px #0ef creates a glowing text inside the glowing button, adding depth.

Performance

Multiple box-shadow layers are rendered by the GPU on the compositor and do not trigger layout recalculation. However, very large blur radii (>60px) on many elements can cause paint performance issues on mobile. Test with Chrome DevTools Paint Flashing to verify.