DOCS/Effects

Neon Border

Shadow & Glow

A gradient glow ring that follows any shape.

Draws a glowing ring around the silhouette with a gradient running along it, plus a soft halo outside.

What it looks like

Before

Neon Border

Same artwork either side, so the difference you see is the effect. Built with the same SVG-filter primitives the product uses, but tuned for legibility at this size — treat it as a faithful illustration of the behaviour rather than a pixel-exact capture of the editor.

When to reach for it#

Highlighted cards and active states.
Sci-fi and cyberpunk framing.
Drawing attention to one element in a layout.

Parameters#

Widthwidth#

Ring thickness.

Gradientcolors#

Colours running along the ring.

Gradient modemode#

Linear sweeps across the shape. Conic wraps the colours around the perimeter, which is the ring-of-fire look and the one that reads as deliberate on a circle.

Haloglow#

Soft light outside the ring.

Rotation speedspeed#

Animates the gradient around the border. Slow is a shimmer; fast is a chase.

Neon Border

When to reach for it#

Parameters#

See also#