Skip to content
Related Articles

Related Articles

Improve Article
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 arrow_drop_up
Recommended Articles
Page :