logo
CSS3 Shadows
CSS3 supported two types of shadows :

1. Text shadow : CSS3 text-shadow property applies shadow to text.

2. Box Shadow  : CSS3 box-shadow property applies shadow to elements.
Text Shadows
<!DOCTYPE html>
<html lang="en">
   <head>
    <title>Text Shadows</title>
      <style>
         .shadow_1 { text-shadow: 2px 2px; font-size:26px; padding:15px 0px;}
         .shadow_2 { text-shadow: 2px 2px red; font-size:26px; padding:15px 0px; }
         .shadow_3 { text-shadow: 2px 2px 5px red; font-size:26px; padding:15px 0px; }
         .shadow_4 { color: #FFF; text-shadow: 2px 2px 4px #000000; font-size:26px; }
         .shadow_5 { text-shadow: 0 0 3px #FF0000; font-size:26px; padding:15px 0px; }
         .shadow_6 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; font-size:26px;
                     padding:15px 0px; 
                 }
         .shadow_7 { color: #FFF; 
                  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; 
                  font-size:26px; 
                  padding:15px 0px; 
                 }
      </style>
      
   </head>
   <body>
   
      <div class="shadow_1">www.freetimelearning.com</div>
      <div class="shadow_2">www.freetimelearn.com</div>
      <div class="shadow_3">www.freetimelearning.com</div>
      <div class="shadow_4">www.freetimelearn.com</div>
      <div class="shadow_5">www.freetimelearning.com</div>
      <div class="shadow_6">www.freetimelearn.com</div>
      <div class="shadow_7">www.freetimelearning.com</div>
      
   </body>
</html>
Output :
www.freetimelearning.com
www.freetimelearn.com
www.freetimelearning.com
www.freetimelearn.com
www.freetimelearning.com
www.freetimelearn.com
www.freetimelearning.com
Box Shadows
<!DOCTYPE html>
<html lang="en">
   <head>
    <title>Box Shadows</title>
<style type="text/css">
.box_shadow{ 
width:250px;  
height:20px; 
padding:40px 10px; 
font-size:18px; 
background-color:#F60; 
box-shadow: 10px 10px; 
margin:25px;
}
.shadow_gray{ 
width:250px;  
height: 20px; 
padding:40px 10px; 
font-size:18px; 
background-color:#F60; 
box-shadow: 10px 10px #CCCCCC;  
margin:25px;
}
.shadow_gray_2{ 
width:250px;  
height:20px; 
padding:40px 10px; 
font-size:18px; 
background-color:#F60; 
box-shadow: 10px 10px 5px #CCCCCC; 
 margin:25px;
}
</style>
</head>

<body>

      <div class="box_shadow">www.freetimelearning.com</div>
      <div class="shadow_gray">www.freetimelearn.com</div>
      <div class="shadow_gray_2">www.freetimelearning.com</div>
      
   </body>
</html>
Output :
www.freetimelearning.com
www.freetimelearn.com
www.freetimelearning.com