Open In App

CSS box-shadow Property

Improve
Improve
Like Article
Like
Save
Share
Report

The box-shadow Property in CSS is used to give a shadow-like effect to the frames of an element. The multiple effects can be applied to the element’s frame which is separated by the comma. The box-shadow can be described using X and Y offsets relative to the element, blur and spread radius, and color. The default value is none. 

Syntax

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

Property Value

 All the properties are described below:

Values

Descriptions

none

It is the default value and it does not contain any shadow property.

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 the shadow above the box.

blur

It is an optional attribute, the work of this attribute is to blur the shadow of the box.

color

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

spread

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

inset

By default, the shadow generates outside the box. But using the inset, we can create the shadow inside the box.

initial

It is used to set the box-shadow property to its default value.

inherit

This property is inherited from its parent.

none

It is the default value and it does not contain any shadow property.

Example 1: This example illustrates the use of the box-shadow property where properties such as h-offset, v-offset & blur are applied along with their values.

HTML




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


Output:

Example 2: This example illustrates the use of the box-shadow property where the spread property is applied to set the size of the shadow.

HTML




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


Output:

Example 3: This example illustrates the use of the box-shadow property where different color shade is applied.

HTML




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


Output:

Example 4: This example illustrates the use of the box-shadow property where inset property is applied to make the shadow inside the box.

HTML




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


Output:

Example 5: This example illustrates the use of the box-shadow property where the initial property is applied to set its values to the default value.

HTML




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


Output:

Supported Browsers

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

  • Google Chrome 10.0
  • Microsoft Edge 12.0
  • Firefox 4.0
  • Safari 5.1
  • Opera 10.5


Last Updated : 14 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads