Box Shadow

This CSS property is used to apply a shadow effect for an html element.  This shadow will be applied to entire element as a background shadow but not for content.  We have to use text-shadow property to apply shadow effect for the text.

 

Values for box-shadow property:

We can use box-shadow property with minimum 2 values or maximum 5 values.

 

The 5 values of box-shadow property are:

  1. Horizontal offset
  2. Vertical Offset
  3. Blur radius
  4. Spread distance
  5. Shadow color

 

<!DOCTYPE html>

<html>

 

   <head>

      <title>CSS Box Shadow</title>

      <style>

         .shadow{

            margin-top: 100px;

            margin-left: 100px;

            width:200px;

            height:200px;

            background: rgb(100,192,245);

            box-shadow:10px 10px;

         }

      </style>

 

    

   </head>

              

   <body>

      <div class=”shadow”>

 

      </div>     

 

   

   </body>

              

</html>

You cannot copy content of this page