Applying a shadow effect

Box-shadow effect

The box-shadow controls the shadow effect surrounding the box of the HTML element.

The box-shadow property supports the parameters outlined in the following Table.

Parameter	Description
h-shadow	Specifies the position of the horizontal shadow. The value can also be a negative number.
v-shadow	Specifies the position of the vertical shadow. The value can also be a negative number
blur	Specifies the distance of the blur effect. This parameter is optional and defaults to 0.
spread	Specifies the size of the shadow.
color	Specifies the color of the shadow.
inset	Specifies that the shadow should be inside the box instead of outside the box.

The blur and spread parameters are optional effects that can be applied to the box-shadow.

The following code shows a basic shadow applied to a div element:

<head>
<style type="text/css">
    /*  BOX SHADOW */
    #div1 {
         position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 100px;
        border: solid 1px black;
    
        /* h-shadow - v-shadow */
        box-shadow: 10px 10px; /* right bottom*/
    }
</style>
</head>
<body>
    <div id="div1">
        <p>box-shadow: 10px 10px; (right bottom)</p>
    </div>
</body>

Box-shadow effect with blur parameter

To provide an effect where the shadow fades out gradually, you will need to specify the blur parameter.

The following code demonstrates the box-shadow effect with blur parameter:

<head>
<style type="text/css">
    #div2{
        position: relative;
        left: 50px;
        top: 130px;
        width: 200px;
        height: 100px;
        border: solid 1px black;
        
        /* h-shadow - v-shadow - blur*/
        box-shadow: 10px 10px 10px; /* RIGHT BOTTOM */
    }
</style>
</head>
<body>
    <div id="div2">
        <p>box-shadow: 10px 10px 10px; (right bottom blur)</p>
    </div>
</body>

Box-shadow effect with spread parameter

The spread parameter specifies the size of the shadow indicating how close a light source is to an object.

The following code shows the box-shadow effect with spread parameter:

<head>
<style type="text/css">
   #div3{
        position: relative;
        left: 50px;
        top: 200px;
        width: 200px;
        height: 100px;
        border: solid 1px black;
        
        /* h-shadow - v-shadow - blur - spread*/
        box-shadow: -10px -10px 5px 5px; /* left top */
    }
</style>
</head>
<body>
    <div id="div3">
        <p>box-shadow: -10px -10px 5px 5px; (left top)</p>
    </div>
</body>

Box-shadow effect with inset parameter

The insetparameter creates the shadow on the inside of the box.

The following code demonstrates the box-shadow effect with inset parameter:

<head>
<style type="text/css">
    #div4{
        position: relative;
        left: 50px;
        top: 320px;
        width: 300px;
        height: 100px;
        border: solid 1px black;
        
        /*  h-shadow - v-shadow - inset */
        box-shadow: 10px 10px inset;
    }
</style>
</head>
<body>
    <div id="div4">
        <p>box-shadow: 10px 10px inset; (inside right top using inset parameter)</p>
    </div>
</body>

Text-shadow effect

The text-shadow property controls the shadow of text. The text-shadow property has parameters similar to those of the box-shadow property.

The following Table outlines the text-shadow parameters.

Parameter	Description
h-shadow	Specifies the position of the shadow along the horizontal axis. This value accepts negative numbers.
v-shadow	Specifies the position of the shadow along the vertical axis. This value accepts negative numbers.
blur	Specifies the distance of the blur effect. This parameter is optional and defaults to 0.
color	Specifies the color of the shadow.

The following code demonstrates the text-shadow effect:

<head>
<style type="text/css">
    #p1 {
        position: absolute;
        left: 300px;
        top: 30px;
        
        /* h-shadow - v-shadow */
        text-shadow: 1px -1px; /* right top */
    }
</style>
</head>
<body>
    <p id="p1">TEXT SHADOW  (text-shadow: 1px -1px;) (right bottom) </p>
</body>

Ads Right