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 demontrastes 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 demontrastes 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 demontrastes 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>

PROMOTIONS