CSS neon glow effects

Layered shadows that read as light rather than as a border.

A convincing neon is three or four `box-shadow` layers at increasing blur and decreasing opacity, all in the same hue, plus a near-white core so the tube looks lit from inside. Text glows use `text-shadow` the same way. The trap is saturation: pure `#f0f` glows muddy, and a slightly desaturated hue with a white core reads brighter than a more saturated one.

33 matching33 effectsFree to copy

Plasma Orb

Featured

A sphere with a turbulent surface, a fresnel rim and a halo that fades into the page rather than into a black square. Leans toward the pointer.

Three filaments on their own strike clocks, most cycles passing with nothing at all. A bolt that is always there is a squiggle; the waiting is the effect.

Headline lit like a blue neon tube, with a slow hum in the brightness.

Sign-style box with a blue tube border glowing inside and out.

Breathing ocean sphere with a specular highlight and a wide ambient bloom.

Neon sign in ocean that stutters and cuts out like failing tube gas.

Card sitting above a blurred ocean duplicate of itself — soft ambient light instead of a hard neon outline.

Light button orbited by a blurred ocean conic aura — high contrast on the button, all the color around it.

Blurred ocean gradient breathing behind a dark card — glow without a single box-shadow.

Hollow tube that floods on hover, with the fill cross-faded behind the text so the label never reflows as the state changes.

Six lit bars scaled from their base on a rolling delay, brightening at the bottom of the travel so the glow pumps with the motion.

Three chevrons lighting in sequence beside a glowing label, the arrows drawn from two borders so each is a single element.

Retro grid receding under a glowing sun, scrolled by exactly one cell so the loop is seamless and the lines appear to run forever.

Heartbeat line cut from a clip-path polygon and scaled vertically, with a sweeping gain band passing over it like a monitor refresh.

Status chip sitting over a blurred copy of itself, the halo breathing on the same cycle as the dot so the two read as one pulse.

Filaments pinned to a pulsing core and swept through short arcs on mismatched cycles, each skewed as it travels so the discharge never looks like a rotating spoke.

Theatre sign whose bulbs are four repeat-axis radial gradients, stepped rather than eased so the chase clicks from lamp to lamp instead of sliding.

Jagged bolt cut by clip-path and lit by stacked drop-shadows, driven on stepped keyframes so the discharge snaps between states the way a real strike does.

Volumetric beam as a blurred trapezoid between an emitter and the ellipse it lands on, all three flickering together so the shaft and its pool stay tied.

A slowly turning 3D cube drawn from six glowing indigo outline faces.

Text link whose short glowing violet underline sweeps to full width and brightens the label on hover.

Concentric cyan neon rings pulse outward from a glowing core like a sonar ping.

A glowing red laser line sweeps up and down across a barcode panel.

A fuchsia comet tail orbits the border of a dark card, leaving a glowing trail as it goes.

Showing 24 of 33. Search the rest →

Questions about css neon glow effects

Why does the glow look flat on a white background?
Neon is a light source, and a light source only shows against something darker than it. These are all built on dark surfaces for that reason; on a light page the same shadows read as a soft drop shadow, which is a different effect.
Do the animated ones cost anything at runtime?
Animating `box-shadow` repaints on every frame, so the pulsing variants are the heaviest thing here. Where it mattered we animate `opacity` on a duplicated glow layer instead, which the compositor can handle without repainting.
Are these css neon glow effects free to use?
All 33 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Copy the CSS and the markup from the artifact's page — there is nothing to install, no runtime and no build step. The CLI (`npx hoverlab add`) is there for the component tiers above these, where a file gets written rather than pasted.