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

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.