CSS - box-shadow Property

Previous
Quiz
Next

CSS box-shadow property adds a shadow effect around an element. One or more shadow effects can be added, separated by commas. The box shadow is described by horizontal and vertical offsets relative to the element, blur, spread radius and color.

Syntax

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

Property Values

Value Description
none This value does not show any shadow. Default
h-offset It defines the horizontal offset. Positive values place the shadow to the right of box, negative values place the shadow to the left of box. Required.
v-offset It defines the vertical offset. Positive values place the shadow below the box, negative values place the shadow above the box. Required
blur It defines the blur radius. Higher values have higher blur. Optional.
spread It defines the spread radius. Positive values increases size of shadow, negative values decreases size of shadow. Optional
color It defines the color of the shadow. Different formats of color can be used. Default is color of text. Optional
inset It changes the outer shadow to inner shadow.
initial It sets the property to its default value.
inherit It inherits the property from the parent element.

Examples of CSS Box Shadow Property

The following examples explain the box-shadow property with different values.

Box Shadow Property with Box Shadow

To set a shadow to a box, we require to specify atleast two values, one for the horizontal offset and the other for the vertical offset. Depending on the signs of the values, the position of the shadow changes accordingly. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }
        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }
        .first {
            background-color: lightcoral;
            box-shadow: 10px 10px;
        }
        .second {
            background-color: lightblue;
            box-shadow: 10px -10px;
        }
        .third {
            background-color: lightgreen;
            box-shadow: -10px 10px;
        }
        .fourth {
            background-color: lightgrey;
            box-shadow: -10px -10px;
        }
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        Positive horizontal offset places the shadow
        to the right of box and negative horizotal offset
        places the shadow to the left of box. 
    </p>
    <p>
        Positive vertical offset places the 
        shadow below the box and negative values places
        it above the box.
    </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px
        </p>
        <p class="fourth boxes">
            box-shadow: -10px -10px
        </p>
    </div>

</body>

</html>

Box Shadow Property with Blur

To set a blur to the shadow of a box, we require to specify three values. The first two values are the horizontal and vertical offsets while the third value is for the blur, higher the third value greter will be the blur. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px 10px 10px;
        }

        .second {
            background-color: lightcoral;
            box-shadow: 10px 10px 20px;
        }

        .third {
            background-color: lightcoral;
            box-shadow: 10px 10px 40px;
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The third value decides the blur, 
        greater the value more is the blur.
    </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px 10px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px 20px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px 40px
        </p>

    </div>

</body>

</html>

Box Shadow Property with Spread Value

To set the size of the shadow of a box, we require to specify four values. The first two values are the horizontal and vertical offsets while the third value is for the blur, the fourth value decides the size of the shadow, positive values result in larger shadows while negative values result in smaller shadows. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightblue;
            box-shadow: 10px 10px 10px 5px;
        }

        .second {
            background-color: lightblue;
            box-shadow: 10px 10px 20px 15px;
        }

        .third {
            background-color: lightblue;
            box-shadow: 10px 10px 40px -5px;
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The fourth value decides the size of the shadow, 
        positive value results in larger shadow while negative
        value results in smaller shadow.
     </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px 10px 5px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px 20px 14px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px 40px -5px
        </p>

    </div>

</body>

</html>

Box Shadow Property with Color Value

To set a color to the shadow of a box, we require to specify atleast three values. The first two values are the horizontal and vertical offsets while the third value is for the color, the color can be specified along with blur and spread as well. The color can be specified in different format (eg. color names, hexadecimal values, rgb values etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px -10px grey;
        }

        .second {
            background-color: lightcoral;
            box-shadow: 10px 10px 20px rgb(51, 204, 0);
        }

        .third {
            background-color: lightcoral;
            box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%);
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The color can be specified as third parameter,
        fourth parameter of even fifth parameter. 
        The specified color will be applied to the shadow.
     </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: 10px -10px grey
        </p>
        <p class="second boxes">
            box-shadow: 10px 10px 20px rgb(51, 204, 0)
        </p>
        <p class="third boxes">
            box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%)
        </p>

    </div>

</body>

</html>

Box Shadow Property with Inset Value

To let the box shadow appear inside the element and not outside the element, we use the inset value. This is shown in the following example

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightgreen;
            box-shadow: 10px -10px red inset;
        }

        .second {
            background-color: lightgreen;
            box-shadow: 10px 10px 20px rgb(51, 204, 0) inset;
        }
    </style>
</head>

<body>
    <h2>
    CSS box-shadow property
    </h2>
    <p>
        The inset value places the
        shadow within the elment.
    </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: 10px -10px red inset
        </p>
        <p class="second boxes">
            box-shadow: 10px 10px 20px rgb(51, 204, 0) inset
        </p>

    </div>

</body>

</html>

Box Shadow Property with Multiple Shadows

To have multiple shadows for a box, each style must be comma separated. The shadows will appear in the order specified in box-shadow property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px -10px grey, 
            15px -15px black, 
            20px -20px brown;
        }

        .second {
            background-color: lightgreen;
            box-shadow: 5px 5px red, 
            10px 10px blue, 
            15px 15px green;
        }
    </style>
</head>

<body>
    <h2>
    CSS box-shadow property
    </h2>
    <p>
        Number of shadows can be altered by 
        specifying the different styles and
        separating them by commas. 
    </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: multiple shadows
        </p>
        <p class="second boxes">
            box-shadow: multiple shadows
        </p>
    </div>

</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
box-shadow 10.0 9.0 4.0 5.1 10.5
css_reference.htm
Print Page
Previous
Next
Advertisements