CSS Glowing & Neon Borders

27 glowing and neon border animations in CSS: neon tubes, electric edges, sweeping spotlights and soft glows for cards, inputs and buttons.

Border Beam

A short beam of light travels the edge of a dark box over a faint track, the look from AI and developer tool sites. A narrow conic arc on an @property angle, masked to the edge and given a glow.

gradient · rotating · glow

Glowing Gradient Border

A rotating gradient border with a soft bloom of the same colors spilling out behind it. The glow is a blurred copy of the conic layer, so the light turns with the border instead of sitting still.

gradient · rotating · glow · tailwind

Aurora Border

Green, teal and violet light drifts along the inside of a dark frame like the northern lights. Two conic layers turn at different speeds under a blur, with a crisp copy masked to the rim.

gradient · glow · rotating

Spotlight Border

A lamp at the bottom of the box swings a cone of light from side to side, lighting the border wherever it lands. The conic angle eases between two limits instead of turning all the way round.

gradient · glow · minimal

Fire Border

Flame colors climb both sides of a dark box while a hot, flickering glow leaks out and upward. A vertical gradient loops its position upward, and a blurred copy flickers in opacity behind it.

gradient · glow

Neon Border

A neon tube framing a dark panel, with a hot white core, a colored halo and light spilling onto the wall. It hums and blinks out for a beat now and then. Only opacity animates.

neon · glow

Glowing Border

A soft halo in the accent color breathes around a light box, the outer glow most cards and inputs want. The halo is a shadow on a pseudo-element, so only its opacity animates.

glow · minimal · tailwind

Electric Border

A crackling line of electricity wraps a dark panel and jumps between three shapes like an arc. SVG turbulence displaces each copy of the outline, and a stepped opacity loop flips between them.

glow · neon

Pulsing Glow Border

The border and its glow beat twice, then rest, like a heartbeat monitor. Good for live, recording or needs-attention states. A shadow ring on a pseudo-element scales and fades on a lub-dub keyframe.

glow · minimal

Marquee Lights Border

A ring of bulbs like a theater marquee, with the light chasing around in steps. Three dotted SVG strokes share the bulbs between them and take turns lighting up, so nothing moves but opacity.

dashed · glow

Neon Sign Border

Two neon tubes on a dark sign stutter on one after the other, hold, blink twice together and go dark. The unlit glass stays faintly visible. Each tube is one element, and only opacity animates.

neon · glow

Inner Glow Border

Light pools inside the edges of the box and washes inward, then ebbs back to a thin glowing rim. Two inset shadows on pseudo-elements, faded with opacity, so the middle stays clear for content.

glow · minimal

Ripple Border

Rings ripple out from the border and fade, one after another, like a call coming in. Each ring is an outline on a pseudo-element with a growing outline-offset, so it keeps the rounded corners.

glow · minimal

Blinking Border

A warning border that flashes twice, holds, and repeats, so the box grabs attention without moving. The flash is a hard step on the border layer's opacity, not a fade, like an alarm light.

glow · minimal

Glitch Border

A dark panel whose border tears into sliced, color-split copies for a split second, then snaps back. The copies are clip-path slices on a stepped keyframe, idle most of the loop so it stays readable.

neon · glow

Lightsaber Border

A glowing blade ignites out of a hilt at the bottom, races around both sides to meet at the top, hums, then retracts. Two SVG halves draw with stroke-dashoffset on the same clock.

glow · draw

Scanner Frame Border

Rounded viewfinder corners breathe around a code while a glowing scan line sweeps up and down, the camera screen of every QR payment app. The corners are one border masked down to its four corners.

glow · minimal

Morphing Blob Border

The outline melts between organic blob shapes while a thinner echo trails a few seconds behind. Only border-radius animates, eight values per shape, so the box never changes size or shifts layout.

minimal · glow

Invalid Input Shake Border

An email field that shakes once and glows red when the address is invalid, then draws a green check once it is fixed. Pure CSS: :invalid plus :not(:placeholder-shown), so it waits for typing.

input · glow

Flowing Electric Border

Two thin arcs of current writhe around a dark panel and never settle into a repeating frame. SMIL eases the noise frequency of an SVG turbulence filter that displaces each outline.

glow · neon

Roaming Spotlight Border

A soft spotlight travels the edge of a dark card, lighting the border it touches and washing the surface beside it. Two registered @property percentages walk the light around at one steady speed.

glow · card · minimal

Transparent Glowing Border

A glowing border with nothing inside it: the halo spills both ways while two pools of light circle the ring. The glow is a blurred wrapper around a masked conic ring, so the middle stays clear.

glow · rotating · minimal

Flash Update Border

A balance card whose border flashes bright and decays each time the number ticks over, the way trading and finance dashboards flag a live update. One keyframe snaps the flash on and eases it out.

glow · card · minimal

Pricing Card Glow Border

The featured plan on a pricing page: a beam of light circles the card, a soft glow follows it outside the edge and a Most popular pill rides the top border. One @property angle drives both.

glow · card · rotating

Card Glow Effect

A feature card floats on a colored glow that drifts slowly beneath it, then lifts and blooms brighter on hover. The glow is a blurred, oversized gradient behind the card that slides in place.

glow · card · gradient

Search Bar Border Beam

An AI search bar that is still working: a beam with a fading tail runs around the pill at one steady speed and the status text shimmers. Three dashes on one SVG rect, offset in time, make the tail.

input · glow · minimal

Chat Input Border Beam

A chat composer with two colored beams circling its edge and a glow leaking out behind them, brighter while the field has focus. One conic layer on an @property angle, masked to the rim and blurred.

input · glow · rotating

How to use these glowing borders

Open any border, copy the HTML and CSS, and put your own content inside the box. The border is drawn with a pseudo-element, a background-clip layer or a mask, so it never changes the box's size or shifts the layout while it animates.

To change the color, set --bdr-color; gradients and glows are mixed from it. To change the size, set --bdr-size: the border width, radius and glow are in em.

Rotating gradient borders animate a registered @property angle, which every current browser supports; older ones show a still gradient border. Every snippet ships with a prefers-reduced-motion rule that stops the motion.