CSSTools
The CSS text-shadow property lets you add shadow effects to text content. Unlike box-shadow which applies to an element's box, text-shadow follows the outline of each character, making it ideal for glow effects, embossed text, neon signs and retro typography.
The property takes four values: horizontal offset, vertical offset, blur radius and color. For example, text-shadow: 2px 2px 4px rgba(0,0,0,0.5) creates a soft drop shadow. You can stack multiple shadows separated by commas to build complex effects like neon glows or 3D letterpress styles.
While box-shadow wraps around the rectangular boundary of an element, text-shadow traces the actual shape of each glyph. This means text-shadow is perfect for decorative typography effects. However, text-shadow does not support the spread value or the inset keyword — those are exclusive to box-shadow.
Neon glow effects use bright colors with large blur values and multiple layers. Letterpress effects combine a subtle light shadow above with a dark shadow below to simulate embossed text. Long shadow effects use many layers with incrementing offsets to create a flat-design shadow stretching diagonally from the text.
Text shadows with large blur values or many layers can impact rendering performance, especially on mobile. Keep blur under 20px for smooth scrolling. If you need heavy glow effects on large text blocks, consider using CSS filters or SVG filters as an alternative.
The text-shadow property is supported in all modern browsers including Chrome, Firefox, Safari, Edge and Opera. It has been well-supported since around 2011, making it safe to use without fallbacks in any current project.