Text Shadow Generator | CSS Effects Tool

Text Shadow Generator

Create beautiful CSS text shadows with real-time preview

Text to Preview

Live Preview

Shadow Effect

Horizontal Offset (px)

-50px 50px

Vertical Offset (px)

-50px 50px

Blur Radius (px)

0px 50px

Shadow Color

Multiple Shadows

Shadow Presets

CSS Code

text-shadow: 2px 2px 4px #000000;

CSS Text Shadow Explained

The CSS text-shadow property adds shadows to text. It's widely used in web design to create visual hierarchy, add depth, and enhance readability.

Syntax:

text-shadow: h-shadow v-shadow blur-radius color;

Property Values:

h-shadow - Required. The horizontal shadow position (positive = right, negative = left)
v-shadow - Required. The vertical shadow position (positive = down, negative = up)
blur-radius - Optional. The blur distance (0 = sharp, higher values = more blurred)
color - Optional. The shadow color (default is current text color)

Multiple Shadows:

You can apply multiple shadows to the same text by separating each shadow with a comma:

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

Browser Support:

The text-shadow property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It works in Internet Explorer 10 and later.