CSS Text Shadow

Text shadow

text-shadow Properties add shadow to text.

The simplest usage is to specify only the horizontal shadow (2px) and vertical shadow (2px):

Text shadow effect!

Example

h1 {
  text-shadow: 2px 2px;
}

Try it yourself

Next, add color (red) to the shadow:

Text shadow effect!

Example

h1 {
  text-shadow: 2px 2px red;
}

Try it yourself

Then, add a blur effect to the shadow (5px):

Text shadow effect!

Example

h1 {
  text-shadow: 2px 2px 5px red;
}

Try it yourself

Tip:Please visit CSS Fonts Chapter, learn how to change font, text size, and text style.

Tip:Please visit CSS Text Effects Chapter, learn how to achieve different text effects.

All CSS text properties

Property Description
color Set the text color.
direction Specify the text direction / writing direction.
letter-spacing Set the spacing between characters.
line-height Set the line height.
text-align Specify the horizontal alignment of text.
text-decoration Specify the decorative effect added to the text.
text-indent Specify the indentation of the first line of a text block.
text-shadow Specify the shadow effect added to the text.
text-transform Control the case of text.
text-overflow Specify how to indicate hidden overflow content to the user.
unicode-bidi Used together with the direction attribute to set or return whether text should be overridden to support multiple languages in the same document.
vertical-align Specify the vertical alignment of text.
white-space Specify how to handle whitespace within elements.
word-spacing Set word spacing.