How set the shadow color of div using CSS ?

Last Updated : 22 Apr, 2021

In this article, we will see how to set the shadow color of 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 to an element.

Approach:

Create the HTML page with 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:

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>

Output:

My Personal Notes

Related Articles

HTML

HTML