Skip to main content

CSS Text Shadow

CSS Text Shadow​

With CSS you can add shadow to text.

It accepts the comma-separated list of shadows that applied to the text. It's default property is none. It applies one or more than one text-shadow effect on the element's text content.

text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;

where:

  • h-shadow: It is the required value. It specifies the position of the horizontal shadow and allows negative values.
  • v-shadow: It is also the required value that specifies the position of the vertical shadow. It does not allow negative values.
  • blur-radius: It is the blur-radius, which is an optional value. Its default value is 0.
  • color: It is the color of the shadow and also an optional value.
  • none: It is the default value, which means no shadow.
  • initial: It is used to set the property to its default value.
  • inherit: It simply inherits the property from its parent element.

Examples​

Simple shadow​

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

Example text shadow

Simple colored shadow​

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

Example text colored shadow

Text with blur effect shadow​

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

Example text with blur effect shadow

White Text with black shadow​

h1 {  
    color:  white;  
    text-shadow:  2px 2px 4px #000000;  
}

Example white text with black shadow

Text with neon glow shadow​

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

Example text with neon glow shadow

Multiple shadows​

To add more than one shadow to the text, you can add a comma-separated list of shadows.

Text with red and blue neon glow shadow​

h1 {  
    text-shadow:  0 0 3px #FF0000, 0 0 5px #0000FF;  
}

Example text with red and blue neon glow shadow

White Text with black, blue and darkblue shadow​

h1 {  
    color:  white;  
    text-shadow:  1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;  
}

Example white text with black, blue and darkblue shadow

Text with plain border​

h1 {  
    color:  coral;  
    text-shadow:  -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;  
}

Example text with plain border

Table of Contents