Text Shadow CSS Generator
Playground
Preview
text-shadow: {{shadow.horizontal}}px {{shadow.vertical}}px {{shadow.blur}}px {{shadow.color}};
-webkit-text-shadow: {{shadow.horizontal}}px {{shadow.vertical}}px {{shadow.blur}}px {{shadow.color}};
-moz-text-shadow: {{shadow.horizontal}}px {{shadow.vertical}}px {{shadow.blur}}px {{shadow.color}};
{{copyMessage}}
Definition and Usage
The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.
CSS Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
To attach more than one shadow to an element, just add a comma-separated list of shadows
Property Values
| Value | Description |
|---|---|
| h-shadow | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box |
| v-shadow | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box |
| blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be |
| color | Optional. The color of the shadow. The default value is the text color. |
| none | Default value. No shadow |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
See also our box-shadow generator.