---
title: CSS Text Shadow
description: "## Text Shadow The `text-shadow` property adds shadow to text. In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px): ## Text shadow effect! `h1 { text-shadow: 2px 2px; }` Next, add a color (red) to…"
url: "https://apprentice.mn/docs/css-text-shadow/"
updated: "2021-05-08"
category: CSS
---

# CSS Text Shadow

## Text Shadow

The `text-shadow` property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

## Text shadow effect!

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

Next, add a color (red) to the shadow:

## Text shadow effect!

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

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

## Text shadow effect!

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

## All CSS Text Properties

| Property | Description |
| --- | --- |
| [color](https://www.w3schools.com/cssref/pr_text_color.asp) | Sets the color of text |
| [direction](https://www.w3schools.com/cssref/pr_text_direction.asp) | Specifies the text direction/writing direction |
| [letter-spacing](https://www.w3schools.com/cssref/pr_text_letter-spacing.asp) | Increases or decreases the space between characters in a text |
| [line-height](https://www.w3schools.com/cssref/pr_dim_line-height.asp) | Sets the line height |
| [text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) | Specifies the horizontal alignment of text |
| [text-decoration](https://www.w3schools.com/cssref/pr_text_text-decoration.asp) | Specifies the decoration added to text |
| [text-indent](https://www.w3schools.com/cssref/pr_text_text-indent.asp) | Specifies the indentation of the first line in a text-block |
| [text-shadow](https://www.w3schools.com/cssref/css3_pr_text-shadow.asp) | Specifies the shadow effect added to text |
| [text-transform](https://www.w3schools.com/cssref/pr_text_text-transform.asp) | Controls the capitalization of text |
| [text-overflow](https://www.w3schools.com/cssref/css3_pr_text-overflow.asp) | Specifies how overflowed content that is not displayed should be signaled to the user |
| [unicode-bidi](https://www.w3schools.com/cssref/pr_text_unicode-bidi.asp) | Used together with the [direction](https://www.w3schools.com/cssref/pr_text_direction.asp) property to set or return whether the text should be overridden to support multiple languages in the same document |
| [vertical-align](https://www.w3schools.com/cssref/pr_pos_vertical-align.asp) | Sets the vertical alignment of an element |
| [white-space](https://www.w3schools.com/cssref/pr_text_white-space.asp) | Specifies how white-space inside an element is handled |
| [word-spacing](https://www.w3schools.com/cssref/pr_text_word-spacing.asp) | Increases or decreases the space between words in a text |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-shadow%2F&linkname=CSS%20Text%20Shadow](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-shadow%2F&linkname=CSS%20Text%20Shadow)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-shadow%2F&linkname=CSS%20Text%20Shadow](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-shadow%2F&linkname=CSS%20Text%20Shadow)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-shadow%2F&linkname=CSS%20Text%20Shadow](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-text-shadow%2F&linkname=CSS%20Text%20Shadow)[https://www.addtoany.com/share](https://www.addtoany.com/share)