How do I make glowing or neon text in CSS?

Stack several text-shadows with zero offset and increasing blur in the glow color — two or three layers builds a convincing neon glow. Add them as separate layers here and copy the combined value.

Is anything uploaded?

No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free. A single unobtrusive ad slot covers hosting.

Omnibus

Text

Shadow 1

X offset2px

Y offset2px

Blur6px

Opacity0.6

Color

CSS

text-shadow: 2px 2px 6px rgba(236, 72, 153, 0.6);

CSS text-shadow generator

Set the horizontal and vertical offset, blur, color and opacity of a text shadow, and stack multiple layers to build glow, neon or layered 3D text. The live preview shows the effect on real type.

It runs entirely in your browser — no upload, no account — so you can craft the effect and copy the text-shadow value.

Need another effect? See all CSS generators.

More CSS generators

CSS Gradient Generator

Linear, radial & conic gradients with unlimited stops.

CSS Box Shadow Generator

Layer offset, blur, spread, color & inset shadows.

CSS Border Radius Generator

Round each corner independently in px, % or em.

Glassmorphism CSS Generator

Frosted-glass blur, transparency & border.

CSS Cubic Bezier Generator

Drag the curve to design custom easing.

CSS Text Shadow Generator — frequently asked questions

How do I make glowing or neon text in CSS?: Stack several text-shadows with zero offset and increasing blur in the glow color — two or three layers builds a convincing neon glow. Add them as separate layers here and copy the combined value.
Is anything uploaded?: No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free. A single unobtrusive ad slot covers hosting.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.