OneTaskBy Tim King · Updated
Glow Effect
Text and Box Shadow Layers With Adjustable Colour, Size and Optional Pulse
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Glow Effect works
A glow effect makes text and buttons look lit from within, like a neon sign. Pick the glow colour and size, choose whether the button pulses, then copy plain HTML and CSS with no JavaScript.
Glows work best on dark backgrounds, where the soft light has something to stand out against. Use one glow colour for the whole section so it reads as a single light source.
How the CSS glow effect is built
The heading uses two stacked text-shadow layers with no offset: a tight one for the bright core
and a wide one for the haze around it. The button does the same with box-shadow, plus an inset
shadow so the light also spills inside the border. Hovering or focusing the button doubles the
glow, and the pulse option animates between the normal and bright glow.
Keeping the glow readable
White or very light text on top of a coloured glow stays readable. If the text itself is the glow colour, keep the glow size small, or thin letters will blur into the haze.
FAQ
Does the glow effect need JavaScript?
No. Every part of the glow effect is CSS shadows and one optional keyframe animation, so it works without any script, loads instantly and keeps working if JavaScript is blocked.
Is animating box-shadow bad for performance?
Animating box-shadow repaints the button each frame, which is fine for one or two small buttons.
Avoid pulsing dozens of large elements at once. Visitors who prefer reduced motion get a steady
glow instead.
How do I make a glowing border without the glow on the text?
Keep the button rule and delete the heading text-shadow rule. The border glow comes only from
the button's box-shadow, so the two parts are independent.
Why is my glow invisible on a white background?
A glow is lighter colour spreading into its surroundings, so on a white page there is nothing darker for it to show against. Use a dark section background, or switch to a darker, saturated glow colour with a larger size.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Box Shadow Generator
Stack several shadow layers for depth that looks real.
Spotlight Effect
A soft glow that follows the mouse across your hero.
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.