Fancy Neon Text Effects with CSS


Last updated:

This article describes how to use CSS to make text look like neon signs. You can see the result in my CodePen showcasing this effect.

The core of this technique is using the CSS property text-shadow with multiple layers and a saturated color. The text-shadow is not used for an actual shadow, but the blurred and colorful glow effect around the text.
Each line in the value of the property represents one of the radii of the glow (for example, the first part of the value creates a “shadow” with a 10px radius). We want the inner shadows to be a brighter version of the color or even white, while the outer ones have a less bright version of the color.

Read 'Fancy Neon Text Effects with CSS'