CSS Text Shadow

Written By: Avinash Malhotra

  1. Home
  2. Frontend
  3. CSS
  4. Text Shadow

Text Shadow

CSS Text Shadow property add shadows to text . The Syntax is almost similarly to Box Shadow, except Spread and inset as they are not allowed in Text Shadow. Text Shadow can enhance look of text only, like p tag, headings etc.

Text Shadow adds shadow any direction, like top, bottom, left and right. Also we can mixed them, like top left or bottom right shadows.

Text Shadow Generator

Text Shadow

text:shadow: 0px 0px 0px #000

Text Shadow Example

            
            
    text-shadow:0px 0px 10px red ;				// all latest browsers

    -webkit-text-shadow:0px 0px 10px red 		// for Chrome and Safari

    -moz-text-shadow:0px 0px 10px red ;		    // for Mozilla based browser

    -ms-text-shadow:0px 0px 10px red ;		    // for IE 10 and above
	
    -o-text-shadow:0px 0px 10px red ;			// Opera browsers
text shadow
Text Shadow

Single Text Shadow

Here are some example to add single text shadows with live example and code.

text-shadow: 0px 0px 5px red;

shadow is equal from all four sides as x-offset and y-offset are zero. Blur is 5px, and color is red.


text-shadow: -2px -2px 2px blue;

x-offset is -2px, y-offset is also -2px, Blur is 2px, and color is blue.



text-shadow: 2px 2px 2px green;

x-offset is 2px, y-offset is also 2px, Blur is 2px, and color is green.

text-shadow:-4px 4px 0px gainsboro;

x-offset is -4px, y-offset is 4px, Blur is 0px, and color is gainsboro.

Multiple Text Shadow

We can also add multiple text shadows by using comma.

text-shadow:-2px 2px 2px gainsboro, -4px 4px 9px gray;

First Shadow: x-offset is -2px, y-offset is 2px, Blur is 0px, and color is gainsboro.

Second Shadow: x-offset is -4px, y-offset is 4px, Blur is 4px, and color is gray


text-shadow: -2px 2px 2px red, -4px 4px 9px gold;

First Shadow: x-offset is -2px, y-offset is 2px, Blur is 0px, and color is red.

Second Shadow: x-offset is -4px, y-offset is 4px, Blur is 9px, and color is gold


text-shadow:-2px 2px 2px #fff, -3px 3px 2px #111, -5px 5px 2px #ccc;;

x-offset is -2px, y-offset is 2px, Blur is 2px, and color is #fff.

x-offset is -3px, y-offset is 3px, Blur is 2px, and color is #111.

x-offset is -5px, y-offset is 5px, Blur is 2px, and color is #ccc.

Text Shadow Browsers Compatibility

Chrome, Safari, Firefox 4, Opera, and IE10 support Text Shadow without any vendor prefix (exp. text-shadow). But we need to add another property like -moz-text-shadow for Firefox 3.6 and earlier. IE 9 and below doesn't support text shadow