CSS Visual Directory
Neon Text Shadow
Stacked glows that turn text into a neon sign.
Edit Neon Text Shadow
Change any value to see it update live.
About this entry
What it is
Stacked glows that turn text into a neon sign.
Dark-themed hero text, gaming sites and event posters.
Copy & use
How to copy and use neon text shadow
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Dark-themed hero text, gaming sites and event posters.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Four stacked shadows at increasing blur, all from the same point. The tight white layer reads as the tube and the wider cyan layers as the glow around it.
0 0 5px #fff- The innermost layer, white and tight, forming the hot core.
0 0 10px #0ff- The first coloured halo.
0 0 40px #0ff- The outermost bloom, widest and faintest in effect.
color: #fff- The letters themselves must be near-white or the glow has nothing to sit on.
Making it yours
How to adjust neon text shadow
Keep every offset at zero — neon glows outward evenly, and any offset immediately reads as a drop shadow instead. Add layers rather than raising a single blur.
Worth knowing before you ship it
Very effective on a dark background and almost invisible on a light one. It also fails a contrast check outright, so keep it for display type rather than body copy.
Common questions
Using neon text shadow
What is neon text shadow?
Stacked glows that turn text into a neon sign. Dark-themed hero text, gaming sites and event posters.
Where do I put the neon text shadow CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Dark-themed hero text, gaming sites and event posters. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will neon text shadow work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise neon text shadow after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing