~/css/neon-effects

7 CSS Neon Effects

6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up

Seven interface components in neon style: an outlined tube button, a card framed in cyan light, a text field that glows when focused, a glowing divider, line icons that glow along their strokes, a switch that lights up and an energy meter.

Filter demos

01. Neon Outline Button

NeonButton

A neon tube button: a thin bright border with an outer glow and a faint inner glow, text in the same tube colour. Hover brightens everything by switching to a stronger shadow stack, and the dark background is what makes the glow work.

View code

<button class="ne1">Enter the arcade</button>

.ne1 { padding: 13px 26px; border: 2px solid #f0abfc; border-radius: 10px; background: transparent; color: #fdf4ff; font: 700 15px Inter, system-ui, sans-serif; letter-spacing: .06em; text-shadow: 0 0 6px #e879f9; box-shadow: 0 0 8px #e879f9, inset 0 0 8px rgba(232,121,249,.4); cursor: pointer; transition: box-shadow .2s; }
.ne1:hover, .ne1:focus-visible { box-shadow: 0 0 6px #fff, 0 0 18px #e879f9, 0 0 36px #c026d3, inset 0 0 14px rgba(232,121,249,.6); outline: none; }

02. Neon Bordered Card

NeonCard

A dark card framed by a cyan neon line that glows into the surrounding darkness. The card text stays a calm light grey, because glowing body text is hard to read; only the frame and the heading glow.

View code

<article class="ne2"><h3>Tonight</h3><p>Doors 20:00 · Live set 22:00</p></article>

.ne2 { width: 240px; max-width: 100%; padding: 20px; box-sizing: border-box; border: 2px solid #67e8f9; border-radius: 16px; background: #050a14; box-shadow: 0 0 12px #06b6d4, inset 0 0 12px rgba(6,182,212,.35); font: 14px Inter, system-ui, sans-serif; }
.ne2 h3 { margin: 0 0 6px; color: #ecfeff; font-size: 22px; text-shadow: 0 0 6px #22d3ee, 0 0 14px #0891b2; }
.ne2 p { margin: 0; color: #a5b4c3; }

03. Neon Focus Input

NeonForm

A text field that lights up with a green neon glow when focused, a strong and very visible focus indicator. The label stays above the field, and the glow is only the focus state, so the resting form is calm.

View code

<div class="ne3"><label for="ne3i">Callsign</label><input id="ne3i" placeholder="e.g. NIGHTOWL"></div>

.ne3 { display: grid; gap: 6px; width: 260px; max-width: 100%; font: 14px Inter, system-ui, sans-serif; }
.ne3 label { color: #bbf7d0; font-weight: 600; letter-spacing: .06em; }
.ne3 input { min-width: 0; padding: 11px 12px; border: 1px solid #14532d; border-radius: 8px; background: #020a05; color: #dcfce7; font: inherit; }
.ne3 input::placeholder { color: #4d7c5a; }
.ne3 input:focus { outline: none; border-color: #4ade80; box-shadow: 0 0 0 1px #4ade80, 0 0 14px rgba(74,222,128,.7); }

04. Neon Divider Line

NeonDivider

A glowing horizontal line made from an hr with a gradient that is brightest in the middle and two shadows for the glow. A single element divider that suits gaming and nightlife pages.

View code

<div class="ne4"><p>Level complete</p><hr><p>Next: Level 4</p></div>

.ne4 { width: 280px; max-width: 100%; color: #e9d5ff; font: 600 14px Inter, system-ui, sans-serif; text-align: center; }
.ne4 p { margin: 0; }
.ne4 hr { height: 2px; margin: 16px 0; border: 0; background: linear-gradient(90deg, transparent, #c084fc, #fff, #c084fc, transparent); box-shadow: 0 0 8px #a855f7, 0 0 16px #7e22ce; }

05. Neon Line Icons

NeonIcons

SVG line icons drawn in neon by giving their strokes a drop-shadow filter in the same colour. Because the glow comes from the icon's own shape, it follows every curve, which a box-shadow on the svg box cannot do.

View code

<ul class="ne5"><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg><span>Favourites</span></li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span>Power</span></li><li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg><span>History</span></li></ul>

.ne5 { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; font: 600 12px Inter, system-ui, sans-serif; color: #fde68a; }
.ne5 li { display: grid; justify-items: center; gap: 8px; }
.ne5 svg { width: 40px; height: 40px; fill: none; stroke: #fde047; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px #facc15) drop-shadow(0 0 8px #ca8a04); }

06. Neon Switch

NeonSwitch

A switch whose track lights up pink when it is on, with the knob glowing at the end. It is a real switch button with aria-checked, and the off state is a dim, unlit tube so the two states differ in brightness, not only colour.

View code

<button class="ne6" role="switch" aria-checked="false" aria-label="Party mode"><span></span></button>

.ne6 { position: relative; width: 70px; height: 34px; padding: 0; border: 2px solid #4a1d3f; border-radius: 17px; background: #12060f; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ne6 span { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #4a1d3f; transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .2s; }
.ne6[aria-checked=true] { border-color: #f472b6; box-shadow: 0 0 10px #ec4899, inset 0 0 8px rgba(236,72,153,.4); }
.ne6[aria-checked=true] span { transform: translateX(36px); background: #fdf2f8; box-shadow: 0 0 6px #fff, 0 0 14px #ec4899; }
.ne6:focus-visible { outline: 2px dashed #fbcfe8; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .ne6, .ne6 span { transition: none; } }

var b = document.querySelector('.ne6');
b.onclick = function () { b.setAttribute('aria-checked', b.getAttribute('aria-checked') !== 'true'); };

07. Neon Energy Meter

NeonProgress

A glowing bar for health, energy or upload progress, filled with a gradient from green to yellow and lit by a matching shadow. A native meter element carries the value for screen readers beneath the styled bar.

View code

<div class="ne7"><label for="ne7m">ENERGY</label><div class="bar" aria-hidden="true"><span style="width:72%"></span></div><meter id="ne7m" min="0" max="100" value="72">72%</meter></div>

.ne7 { width: 260px; max-width: 100%; font: 700 12px Inter, system-ui, sans-serif; color: #bef264; letter-spacing: .12em; }
.ne7 label { display: block; margin-bottom: 6px; }
.ne7 .bar { height: 12px; border-radius: 6px; background: #0f1a05; box-shadow: inset 0 0 0 1px #365314; }
.ne7 .bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #22c55e, #a3e635, #facc15); box-shadow: 0 0 10px #84cc16; }
.ne7 meter { position: absolute; width: 1px; height: 1px; opacity: 0; }

About these CSS Neon Effects

Glow is layered shadows

A tight bright shadow and one or two wider, softer ones in the same hue make the glow. For SVG icons use filter: drop-shadow() so the glow follows the strokes.

Darkness is the canvas

Neon only works on very dark backgrounds. Keep large surfaces near black and save the glow for edges, headings and active states.

Glow the frame, not the text

Body text that glows is hard to read. Keep paragraphs in a calm light grey and let borders, icons and headings carry the effect.

States must differ in brightness

On and off should differ in lightness, not only in colour, so people with colour vision deficiencies can still tell them apart.

Frequently asked questions

How is this different from neon text?

The neon text collection is about lettering; this one applies the look to buttons, inputs and other components.

Will neon pass contrast checks?

The text colours here are near-white on near-black, which passes easily; glow does not count toward contrast.

Can neon work in light mode?

Not really. Use coloured shadows instead on light pages.