How the Effect Works
CSS text-shadow accepts a comma-separated list of shadows. The neon effect stacks multiple shadows with the same hue but increasing blur radius. The innermost layer is white or near-white (the bright core), followed by the colour at low blur (tight glow), then the same colour at high blur (the soft halo).
/* Structure of a neon shadow stack */ text-shadow: 0 0 4px #fff, /* white core — bright centre */ 0 0 8px #7c6fff, /* tight colour glow */ 0 0 20px #7c6fff, /* medium glow */ 0 0 40px #7c6fff, /* soft outer halo */ 0 0 80px #7c6fff; /* wide ambient glow */
Each layer uses 0 for both x and y offsets (the shadow radiates outward equally). Only the blur radius increases. Layering is what creates the sense of depth and intensity — a single shadow looks flat, but five layers looks lit from within.
Basic Neon Glow
The minimal version: three layers. Works on any dark background.
.neon-text {
color: #fff;
font-weight: 800;
text-shadow:
0 0 6px #fff,
0 0 20px #7c6fff,
0 0 60px #7c6fff;
}
Neon glow is only visible against dark backgrounds. On light backgrounds the glow is invisible. Use background: #0a0a0f or another very dark colour on the container.
Colour Variations
The effect works with any hue. Change the shadow colour to match your brand or create the classic neon sign palette:
/* Electric blue */
.neon-blue { color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px #00cfff, 0 0 60px #00cfff; }
/* Hot pink */
.neon-pink { color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px #ff6fb0, 0 0 60px #ff6fb0; }
/* Acid green */
.neon-green { color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px #39ff14, 0 0 60px #39ff14; }
/* Orange */
.neon-orange { color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px #ff7700, 0 0 60px #ff7700; }
/* Red */
.neon-red { color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px #ff2244, 0 0 60px #ff2244; }
Intense Multi-Layer Glow
For a more dramatic effect, use five or more layers with carefully scaled blur radii:
.neon-intense {
color: #fff;
font-weight: 800;
text-shadow:
0 0 2px #fff,
0 0 4px #fff,
0 0 8px #7c6fff,
0 0 16px #7c6fff,
0 0 32px #7c6fff,
0 0 64px rgba(124, 111, 255, 0.6),
0 0 128px rgba(124, 111, 255, 0.3);
}
Neon Sign with Border
The classic neon sign look adds a coloured text colour and a glowing border around the element, simulating a glass tube:
.neon-sign {
color: #7c6fff;
font-weight: 800;
letter-spacing: 0.2em;
padding: 16px 32px;
border: 2px solid #7c6fff;
border-radius: 8px;
/* Text glow */
text-shadow:
0 0 4px #7c6fff,
0 0 16px #7c6fff,
0 0 40px #7c6fff;
/* Border glow */
box-shadow:
0 0 8px #7c6fff,
0 0 24px #7c6fff,
inset 0 0 8px rgba(124, 111, 255, 0.1);
}
Flickering Animation
Real neon signs flicker. Add a subtle keyframe animation to simulate the effect:
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 6px #fff,
0 0 20px #7c6fff,
0 0 60px #7c6fff;
opacity: 1;
}
20%, 24%, 55% {
text-shadow: none;
opacity: 0.8;
}
}
.neon-flicker {
color: #fff;
font-weight: 800;
animation: flicker 4s infinite alternate;
}
Always wrap animations in a @media (prefers-reduced-motion: no-preference) block. Users who have set reduced motion in their operating system preferences should not see flickering effects, which can be problematic for photosensitive conditions.
Performance Tips
text-shadow at large blur radii can impact paint performance on low-end devices. A few rules:
- Limit the number of shadow layers to five or fewer for static text
- For animated neon, add
will-change: text-shadowto promote the element to its own layer - Avoid animating text-shadow on large bodies of text — apply it only to headlines and short labels
- On very large blur values (80px+), consider using a drop-shadow filter on a parent instead, which is sometimes GPU-composited
Build Neon Effects with CSSTools.io Text Shadow Generator
The Text Shadow Generator lets you layer multiple shadows visually and preview the neon effect on your actual headline text — not just a generic placeholder.
Open the Text Shadow Generator and type your actual headline into the text preview field. The preview uses your real text so you can see how the glow looks at the right size and weight.
Set the first shadow to white (#ffffff) with a very small blur radius of 4–6px and zero x/y offset. This creates the bright core that makes the text look lit from within.
Click Add Shadow and add two or three more layers using your brand colour. Increase the blur radius progressively — try 20px, then 40px, then 80px. Watch the glow build up in the preview.
Use the background colour swatches in the preview area to switch to a dark background. The glow only reads on dark surfaces — this is the most important preview step.
Hit Copy CSS. The output includes the complete text-shadow property with all layers. Add color: #fff and your dark background separately, or combine them into a component class.
Build neon text effects with layered shadows
Preview on your actual headline text. Layer up to 8 shadows and copy the CSS instantly.
Open Text Shadow Generator →