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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.