CSS | box-shadow Property

The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element.

Syntax:

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

Property Value:

  • h-offset: It is required to set the position of the shadow horizontally. The positive value is used to set the shadow on the 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 to set the position of shadow value vertically. The positive value is used to set the shadow below to the box and a 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.

    Syntax:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS box-shadow Property</title>
          
            <style>
                .gfg1 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset v-offset blur */
                    box-shadow: 5px 10px 10px;
                }
                .gfg2 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset v-offset blur */
                    box-shadow: 5px 10px 28px;
                }
            </style>
        </head>
          
        <body>
            <div class = "gfg1">
                <h1>Welcome to GeeksforGeeks!</h1>
           </div><br><br>
             
            <div class = "gfg2">
                A computer Science portal
            </div>
        </body>
    </html>                                

    chevron_right

    
    

    Output:

  • spread: It is used to set the size of the shadow. The size of the spread depends on the value of the spread.

    Syntax:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS box-shadow Property</title>
          
            <style>
                .gfg1 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset
                           v-offset blur spread */
                    box-shadow: 5px 10px 10px 10px;
                }
                .gfg2 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset
                           v-offset blur spread */
                    box-shadow: 5px 10px 28px 20px;
                }
            </style>
        </head>
          
        <body>
            <div class = "gfg1">
                <h1>Welcome to GeeksforGeeks!</h1>
           </div><br><br>
             
            <div class = "gfg2">
                A computer Science portal
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • color: It is optional attribute and used to set the color of shadow.

    Syntax:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS box-shadow Property</title>
          
            <style>
                .gfg1 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset v-offset blur 
                    spread color */
                    box-shadow: 5px 10px 10px 10px green;
                }
                .gfg2 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset v-offset blur 
                    spread color */
                    box-shadow: 5px 10px 28px 20px green;
                }
            </style>
        </head>
          
        <body>
            <div class = "gfg1">
                <h1>Welcome to GeeksforGeeks!</h1>
           </div><br><br>
             
            <div class = "gfg2">
                A computer Science portal
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • inset: By default the shadow generates outside the box but by the use of inset we can create the shadow inside the box.

    Syntax:

    box-shadow: h-offset v-offset color inset;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS box-shadow Property</title>
          
            <style>
                .gfg1 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset v-offset blur 
                    spread color inset */
                    box-shadow: 5px 10px 10px 10px green inset;
                }
                .gfg2 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: h-offset v-offset blur 
                    spread color inset */
                    box-shadow: 5px 10px 28px 20px green inset;
                }
            </style>
        </head>
          
        <body>
            <div class = "gfg1">
                <h1>Welcome to GeeksforGeeks!</h1>
           </div><br><br>
             
            <div class = "gfg2">
                A computer Science portal
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • initial: It is used to set box-shadow property to its default value.

    Syntax:

    box-shadow: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS box-shadow Property</title>
          
            <style>
                .gfg1 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: initial */
                    box-shadow: initial;
                }
                .gfg2 {
                    border: 1px solid;
                    padding: 10px;
                      
                    /* box-shadow: initial */
                    box-shadow: initial;
                }
            </style>
        </head>
          
        <body>
            <div class = "gfg1">
                <h1>Welcome to GeeksforGeeks!</h1>
           </div><br><br>
             
            <div class = "gfg2">
                A computer Science portal
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • inherit: This property is inherited from its parent.
  • none: It is the default value and it does not contains any shadow property.

Supported Browsers: The browser supported by box-shadow property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


My Personal Notes arrow_drop_up


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 :

Be the First to upvote.


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