Glow effect
Also called neon glow, glowing button, or CSS glow
A soft halo of colored light around a button, card, or text, made with colored shadows or a blurred layer behind the element.
// The base glow is a stack of centered, colored shadows. The hover glow is a
// second layer that fades in its opacity, which is cheaper than animating blur.
const GLOW =
'shadow-[0_0_0_1px_rgb(139_92_246/0.5),0_0_24px_rgb(139_92_246/0.45),0_0_64px_rgb(139_92_246/0.25)]';
const HOVER_GLOW =
'after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:opacity-0 after:shadow-[0_0_48px_8px_rgb(236_72_153/0.6)] after:transition-opacity after:duration-200 hover:after:opacity-100';
export function GlowButton() {
return (
<div className='grid place-items-center bg-slate-950 p-16'>
<button
type='button'
className={`relative rounded-full bg-violet-600 px-6 py-3 text-sm font-semibold text-white ${GLOW} ${HOVER_GLOW}`}
>
Get started
</button>
</div>
);
}Give the "Get started" button a violet glow: box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.5), 0 0 24px rgba(139, 92, 246, 0.45), 0 0 64px rgba(139, 92, 246, 0.25). On hover, fade in a stronger glow layer over 200ms by animating its opacity, and skip any pulsing when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Glow effect?
A glow surrounds an element with light in its own color, as if it were lit from inside. In CSS it is usually a box-shadow with no offset and a large blur, such as 0 0 24px in the accent color, or a blurred copy of a gradient placed behind the element. Text glows the same way with text-shadow.
Use it to point at one thing: the primary call to action, the selected plan on a pricing page, an active status dot, or a focused input. Glows look strongest on dark backgrounds; on light pages, use a more saturated color and a tighter blur.
If everything glows, nothing stands out, so limit it to one or two elements per screen. A slow pulse can draw attention; keep it gentle and stop it for people who prefer reduced motion. Fading the opacity of a glow layer is cheaper than animating the shadow’s blur.
Often confused with
- Drop shadow
- A drop shadow is dark, offset, and shows elevation. A glow is centered, colored light that draws attention.
Related terms
All termsDrop shadow
A shadow cast behind an element to make it look raised off the page, with larger, softer shadows signaling higher elevation.
Border beam
A short streak of light that travels around the edge of a card or button on a loop, drawing attention to it.
Aurora background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
Hover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.