CSS3 text-shadow property

Understanding CSS3 shadow property

Examples

Below all are CSS3 shadow effect. I have put the CSS code here. But if you want to see page source, you better download cleaner html file, since the page source of this article contains a lot of extra styling information as I crafted it in blogger. 

First six examples explain vertical and horizontal positioning of the shadow works. Essentially they are similar with different positions of the shadow. The remaining examples illustrate the capability of this CSS3 property. 

1. In below code, 
        0em - means shadow is not horizontally skewed, it is exactly vertically aligned   
                   with the text. Second value, 
        0.2em - means the shadow will appear below the text (since the value is positive) by   
                   0.2em
        #0e0bf7 - is hex value for a shadow color
    Code
        <span style="text-shadow: 0em 0.2em #0e0bf7;">CSS   
        Shadow</span>  
    Output
        CSS Shadow

2. In below code,
        1em - means the shadow will appear right skewed (since the value is positive) by 1em
        0.2em - means the shadow will appear below the text (since the value is positive) by   
                   0.2em
       #87bb04- is hex value for shadow color
    Code
       <span style="text-shadow: 1em 0.2em #87bb04;">CSS 
        Shadow</span>
    Output
           CSS Shadow

3. In below code,
        1em - means the shadow will appear right skewed (since the value is positive) by 1em
        1em - means the shadow will appear below the text (since the value is positive) by   
                   1em
       #f00- is hex value for a red shadow color
    Code
         <span style="text-shadow: 1em 1em #87bb04;">CSS 
        Shadow</span>
    Output

           CSS Shadow


4. In below code,

        -1em - means the shadow will appear left skewed (since the value is negative) by 1em
        1em - means the shadow will appear below the text (since the value is positive) by   
                   1em
       #fc04f7- is hex value for a shadow color
     Code
         <span style="text-shadow: -1em 1em #fc04f7;">CSS 
        Shadow</span>
     Output
           CSS Shadow


5. In below code,

        -1em - means the shadow will appear left skewed (since the value is negative) by 1em
        0em - means the shadow will appear in the same line of the text
       #fc04f7- is hex value for a shadow color
     Code
         <span style="text-shadow: -1em 0em #ff6a00;">CSS 
        Shadow</span>
     Output

           CSS Shadow

6. In below code,

        -1em - means the shadow will appear left skewed (since the value is negative) by 1em
        -1em - means the shadow will appear above the text (since the value is negative) by   
                   1em
       #05b4a3- is hex value for a shadow color
     Code
         <span style="text-shadow: -1em -1em #05b4a3;">CSS 
        Shadow</span>
     Output

           CSS Shadow

7. Fuzzy text shadow effect

    Below the highlighted value 0.15em is an amount of desired spread of shadow edges or 
    simply shadow fuzziness value.
    Code
         <span style="text-shadow: 0.5em 0.5em 0.15em #808080;">CSS 
        Shadow</span> 
    Output

       CSS Shadow

8. Multiple Shadows - separate multiple shadow specs by comma

    Code
         <span style="text-shadow: 0.1em 0.1em 0.2em #f00,0.1em -0.1em 
          0.2em #0e0bf7">CSS Shadow</span> 
    Output    
       CSS Shadow

9. Another example
    Code
         <span style="color: white; text-shadow: 0.1em 0.1em 0.2em 
         black;">CSS Shadow</span>     
    Output
       CSS Shadow
               
10. Inset and outset effects with shadows
      Code
           <div style="display: block;background: #c2bfbf;">
        <span style="color:#808080;text-shadow: 1px 1px white, -1px -1px   
              #444">Inset</span> <br />
        <span style="color:#808080;text-shadow: -1px -1px white, 1px 1px  
              #333">Outset</span> 
      </div>
      Output

     Inset
     Outset

11. Neon glow (light & heavy intensity)  
      Glow effect can be achieved by having shadow very close to text (that is smaller 
      horizontal and vertical skew values) and with more spreading. For intense glow, simply 
      specify same shadow specifications multiple time.
      Code
             <span style="text-shadow: 0.1em 0.1em 0.2em blue;">CSS 
            Shadow</span> 
             <span style="text-shadow: 0.1em 0.1em 0.2em blue,0.1em 0.1em 0.2em 
            blue,0.1em 0.1em 0.2em blue;">CSS Shadow</span>
      Output
         CSS Shadow
       CSS Shadow

12. Outlining text with shadows
      Show four shadows, one on each side of the text with very small horizontal and vertical    
      skew values.
       Code
             <span style="color:fc04f7;text-shadow: 1px 1px black,1px -1px 
             black,-1px -1px black,-1px 1px black;">CSS Shadow</span>  
       Output
         CSS Shadow

13. Fire effect using multiple shadows
      One main point to remember here is to ensure that spread value increases as the color   
      shades moves away from text so that it mixes with the background well.
      Code     
      <div style="display:block;background:black"><br />
         <span style="color: white;text-shadow:0 0 4px white, 0 -5px 4px 
               #FF3, 2px -10px 6px #FD3, -2px -15px 11px #F80, 2px -25px  
               18px #F20;">CSS Shadow</span>
         <br /><br />
      </div>
      Output

       CSS Shadow