How set the shadow color of div using CSS ?

Last Updated : 11 May, 2023

In this article, we will see how to set the shadow color of the div using CSS. Like humans have their shadows we can use CSS to make any color of shadow to the div element.

Box shadow property: This property is used to create one or more than one shadow of an element.

Syntax:

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

Approach:

Create the HTML page with a div element.
With the help of the box-shadow property apply shadow to the div element.

Example 1: In the below example, we have applied some shadow to our div element with the help of the box-shadow property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
            font-size: 25px;
        }
 
        #test {
            border-style: outset;
            padding: 10px;
            box-shadow: 5px 10px green;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
 
    <h2>box-shadow: 5px 10px green.</h2>
    <div id="test">
        <p>
            Welcome to GeeksForGeeks, a computer
            science for geeks.
        </p>
    </div>
</body>
</html>

Output:

Example 2: In this example, we are using the Box shadow property to provide shadow to our div element.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
            font-size: 22px;
            background-color: lightgreen;
        }
 
        #test {
            border-style: outset;
            padding: 10px;
            box-shadow: 5px 10px 10px 20px green;
            background-color: lightgreen;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
 
    <h2>box-shadow:5px 10px 10px 20px green.</h2>
    <div id="test">
        <p>
            Welcome to GeeksForGeeks,
            a computer science for geeks.
        </p>
    </div>
</body>
</html>