Box-shadow CSS

It is used to add box shadow-like effects around the frame of an element, specify the horizontal and the vertical shadow.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS box-shadow Property</title>

    <style>
      div
      {
      border: 1px solid;
      padding: 10px;
      }
      #hvb
      {
        /* box-shadow: h-offset v-offset blur */
        box-shadow: 5px 10px 10px;
      }
      #spr
      {
        /* box-shadow: h-offset v-offset blur spread */
         box-shadow: 5px 10px 10px 10px;
       }
       #col
       {
         /* box-shadow: h-offset v-offset blur spread color */
         box-shadow: 5px 10px 10px 10px pink;
        }
        #ins
        {
          /* box-shadow: h-offset v-offset blur spread color inset */
          box-shadow: 5px 10px 10px 10px pink inset;
        } 
         
    </style>
  </head>

  <body>
    <div id = "hvb">
      <h1> h-offset, v-offset and blur attributes.</h1>
   </div>
<br><br>
    <div id = "spr">
      <h1> Includes the spread attribute.</h1>
    </div>
<br><br>
    <div id = "col">
    <h1> Includes the color attribute.</h1>
  </div>
<br><br>
  <div id = "ins">
   <h1>  Includes the inset attribute.</h1>
 </div>
<br><br>

  </body>
</html>

OUTPUT: