CSS Text Shadow Generator

CSS Toolkit

Preview Text

Horizontal Offset 2px

Vertical Offset 2px

Blur Radius 4px

Shadow Color

#000000

Opacity 50%

Generated CSS

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

What is CSS Text Shadow?

The CSS text-shadow property adds shadow effects to text. It accepts horizontal offset, vertical offset, blur radius, and color as values. Multiple shadows can be stacked by separating them with commas, allowing for creative glow effects, embossed text, and 3D-style typography.

Text Shadow Syntax

text-shadow: offset-x offset-y blur-radius color;

Creative Text Shadow Examples

      /* Subtle shadow */

      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

      /* Glow effect */

      text-shadow: 0 0 10px rgba(124,106,247,0.8);

      /* Hard shadow */

      text-shadow: 3px 3px 0px rgba(0,0,0,1);

      /* Multiple shadows */

      text-shadow: 1px 1px 2px red, 0 0 8px blue;