Related Articles

Related Articles

CSS | box-shadow Property
  • Last Updated : 08 Aug, 2019

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