How to add a box-shadow on one side of an element using CSS?

Last Updated : 19 Feb, 2019

The box-shadow property is used to set the box shadow on one side of element.

Syntax:

box-shadow: h-offset v-offset blur spread color;

box-shadows values:

h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of the box and a negative value is used to set the shadow on the left side of the box.
v-offset: It is required and used to set the position of shadow vertically. The positive value is used to set the shadow below to the box and negative value is used to set shadow above box.
blur: It is an optional attribute, the work of this attribute is to blur the shadow of the box.
spread: It is used to set the size of the shadow. The size of spread depends on the value of spread.
color: It is optional attribute and used to set the color of shadow.

Example 1: This example set the box shadow in the bottom of box.

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        Box-shadow Property 
    </title>  
      
    <!-- style to set box-shadow property -->
    <style> 
        h1 { 
            text-align: center; 
            background: green; 
            padding-top: 60px; 
            color: white; 
            width: 500px; 
            height: 130px; 
            box-shadow: 0 10px 10px blue;  
        } 
    </style> 
</head> 
  
<body>  
    <h1>GeeksForGeeks</h1>  
</body>  
  
</html>                     

Output:

Example 2: This example set the box-shadow in the left side of box.

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        Box-shadow Property 
    </title>  
      
    <!-- style to set box-shadow property -->
    <style> 
        h1 { 
            text-align: center; 
            background: green; 
            padding-top: 60px; 
            color: white; 
            width: 500px; 
            height: 130px; 
            box-shadow: -10px 0px 10px blue;  
        } 
    </style> 
</head> 
  
<body>  
    <h1>GeeksForGeeks</h1>  
</body>  
  
</html>                     

Output:

inset: By default the shadow generates outside the box but inset value can be used to create shadow inside the box.

Example 3: This example create shadow inside the box.

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        Box-shadow Property 
    </title>  
      
    <!-- style to set box-shadow property -->
    <style> 
        h1 { 
            text-align: center; 
            background: green; 
            padding-top: 60px; 
            color: white; 
            width: 500px; 
            height: 130px; 
            box-shadow: 0px 10px 20px blue inset;  
        } 
    </style> 
</head> 
  
<body>  
    <h1>GeeksForGeeks</h1>  
</body>  
  
</html>                     