**Text shadow** refers to adding layers to the text, i.e., giving the text a shadow whether to enhance, highlight, or increase the visual appeal of specific text by giving the text depth.

# What is the format?

Text shadow can be added to the text by using the tag `text-shadow` and defining it within the curly brackets of a particular font style. 

The code below shows how to declare it in CSS:  

<html>
 <head>
   <style>
     h1 {text-shadow: 3px 3px 0px #32CD32}
   </style>
 </head>
 <body>
   <h1>The green colour is the text shadow</h1>
 </body>
</html>

codemirror

# What do the four arguments mean?

In the above snippet the `text-shadow` tag is followed by a semi-colon and 4 arguments, which are as follows:

1. The **x coordinate** of the starting point of the shadow

2. The **y coordinate** of the starting point of the shadow

3. The **blur radius** i.e. how much blurring effect do we want the shadow to have on the text. If you don't mention this the **default value is 0**

4. An optional field which is the *color* for the text shadow. This must be given in a hexadecimal format 

> **Points to Note:** 
>* The colour field can be written either at the start of the four arguments or at the end
>* The coordinate fields can also contain negative values.                                          
>  * **x-coordinate:** *Positive* number means that the shadow will start from that many pixels **right** of the text and **left** for *negative* values. 
>  * **y-coordinate:** *Positive* number means that the shadow will start from that many pixels **below** of the text and **above** for *negative* values. 

<html>
 <head>
   <style>
     h1 {text-shadow: -3px 3px 0px #32CD32}
   </style>
 </head>
 <body>
   <h1>The text shadow has x-coordinate set to a negative value</h1>
 </body>
</html>

<html>
 <head>
   <style>
     h1 {text-shadow: 3px -3px 0px #32CD32}
   </style>
 </head>
 <body>
   <h1>The y-coordinate of the text shadow is set to negative</h1>
 </body>
</html>

<html>
 <head>
   <style>
     h1 {text-shadow: -3px -3px 0px #32CD32}
   </style>
 </head>
 <body>
   <h1>Both, x and y-coordinates are set to negative</h1>
 </body>
</html>

<html>
 <head>
   <style>
     h1 {text-shadow: 3px 3px 5px #32CD32}
   </style>
 </head>
 <body>
   <h1>Adding blurring effect to the text</h1>
 </body>
</html>

# Can we add more than one shadow?

The text-shadow property also allows us to add more than one color of shadow to the text. This is done by simply adding a comma at the end of the first four arguments and adding an additional 4 arguments which will define the properties of the second shadow. You can add **multiple** shadows this way! 

<html>
 <head>
   <style>
     h1 {text-shadow: 3px 3px 0px #32CD32, 0px 0px 10px #CCCC00}
   </style>
 </head>
 <body>
   <h1>The green colour is the text shadow and yellow is the second shadow</h1>
 </body>
</html>

<html>
 <head>
   <style>
     h1 {text-shadow: 3px 3px 0px #32CD32, 0px 0px 10px #CCCC00, -5px 0px 0px #00FFFF}
   </style>
 </head>
 <body>
   <h1>Adding multi-coloured text shadow</h1>
 </body>
</html>

What is text shadow in CSS?

Text shadow refers to adding layers to the text, i.e., giving the text a shadow whether to enhance, highlight, or increase the visual appeal of specific text by giving the text depth. What is the format? Text shadow can be added to the text by using the tag text-shadow and defining it within the curly brackets of a particular font style. The code below shows how to declare it in CSS: 

What is text shadow in CSS?

What is the format?

What do the four arguments mean?

Examples

1. X coordinate

2. Y coordinate

3. Blur radius

Can we add more than one shadow?