What is Text Shadow

text shadow
Text Shadow

CSS3 Text Shadow adds shadows to text characters. The Syntax is almost similarly to Box Shadow, except Spread and inset as they are not allowed in Text Shadow.


Text Shadow code

            
            
    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
			
            
          

Single Text Shadow

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

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.

Browsers Compatibility

Chrome, Safari, Firefox 4, Opera, and IE10 support Box Shadow without any vendor prefix (exp. box-shadow). But we need to add another property like -moz-box-shadow for Firefox 3.6 and earlier.