Text Shadow Generator
Create beautiful CSS text shadows with real-time preview
Shadow Effect
-50px
50px
px
-50px
50px
px
0px
50px
px
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.