CSS box-shadow Property

The CSS box-shadow property is used to add shadows to elements. For example,

h1 {
    box-shadow: 12px 12px 8px purple;
    background-color: greenyellow;
}

Browser Output

CSS Box Shadow Example

Here, the box-shadow property adds a purple shadow to the content of the h1 element.

The box shadow is also known as the drop shadow.


CSS box-shadow syntax

The syntax for the box-shadow property is as follows,

box-shadow:  horizontal-offset vertical-offset blur-radius spread-radius color | inset | initial | inherit | none ;

Here,

  • horizontal-offset: specifies the horizontal position of the shadow relative to the element
  • vertical-shadow: specifies the vertical position of the shadow relative to the element
  • blur-radius: specifies the value to control the blurriness of the shadow
  • spread-radius: specifies the value to expand or contract the shadow
  • color: specifies the color of the shadow, which can be in any format such as named color, hexadecimal color, RGB, or HSL
  • inset: puts the shadow inside the element, the shadow is created outside of the element by default
  • initial: sets the value to the default
  • inherit: inherits the value from its parent element
  • none: specifies the default value, no shadow

Note: The box-shadow property needs the value of horizontal-shadow and vertical-shadow, while others are optional.


CSS box-shadow: Adding Horizontal Shadow

The horizontal shadow can be adjusted using the horizontal-offset value in the box-shadow property. The horizontal-offset value can take a positive and negative value.

In the horizontal-offset value,

  • positive value creates a shadow in the right direction
  • negative value creates a shadow in the left direction

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS box-shadow</title>
    </head>

    <body>
        <h1>Horizontal Shadows</h1>
        <p>
            The positive value of the horizontal offset creates a shadow in the
            right direction.
        </p>
        <h2 class="positive-value">box-shadow: 20px 10px orange;</h2>
        <p>
            The negative value of the horizontal offset creates a shadow in the
            left direction.
        </p>
        <h2 class="negative-value">box-shadow: -20px 10px orange;</h2>
    </body>

</html>
h2 {
    background-color: greenyellow;
}

h2.positive-value {
    /* horizontal-offset | vertical-offset | shadow color */
    box-shadow: 20px 10px orange;
}

h2.negative-value {
     /* horizontal-offset | vertical-offset | shadow color */
    box-shadow: -20px 10px orange;
}

Browser Output

CSS Box Shadow Horizontal Example

CSS box-shadow: Adding Vertical Shadow

The vertical shadow can be adjusted using the vertical-offset value in the box-shadow property. The vertical-offset value can take a positive and negative value.

In the vertical-offset value,

  • positive value creates a shadow in the bottom direction
  • negative value creates a shadow in the top direction

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS box-shadow</title>
    </head>

    <body>
        <h1>Vertical Shadows</h1>
        <p>
            The positive value of the vertical offset creates a shadow in the
            bottom direction.
        </p>
        <h2 class="positive-value">box-shadow: 10px 10px orange;</h2>
        <p>
            The negative value of the vertical offset creates a shadow in the
            top direction.
        </p>
        <h2 class="negative-value">box-shadow: 10px -10px orange;</h2>
    </body>
</html>
h2 {
    background-color: greenyellow;
}

h2.positive-value {
     /* horizontal-offset | vertical-offset | shadow color */
    box-shadow: 10px 10px orange;
}

h2.negative-value {
     /* horizontal-offset | vertical-offset | shadow color */
    box-shadow: 10px -10px orange;
}

Browser Output

CSS Box Shadow Vertical Example

CSS box-shadow: Adding a blur radius

The blur-radius value of the box-shadow property is used to blur the shadow. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS box-shadow</title>
    </head>

    <body>
        <h1>Blurry Shadows</h1>
        <p>This shadow has a blur value of 5px.</p>
        <h2 class="blur-5px">box-shadow: 10px 10px 5px orange;</h2>
        <p>This shadow has a blur value of 15px.</p>
        <h2 class="blur-10px">box-shadow: 10px 10px 15px orange;</h2>
    </body>

</html>
h2 {
    background-color: greenyellow;
}

h2.blur-5px {
    /* horizontal-offset | vertical-offset | blur-radius | shadow color */
    box-shadow: 10px 10px 5px orange;
}

h2.blur-10px {
    /* horizontal-offset | vertical-offset | blur-radius | shadow color */
    box-shadow: 10px 10px 15px orange;
}

Browser Output

CSS Box Shadow Blur Example

Note: The default value of blur-radius is 0 which means no blur. The larger the value, the more blurred the shadow appears.


CSS box-shadow: Adding spread radius

The spread-radius value of the box-shadow property is used to increase or decrease the size of the shadow.

The shadow size,

  • increases with the positive value
  • decreases with the negative value
  • remains the same size at 0 (default value)

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS box-shadow</title>
    </head>

    <body>
        <h1>Adding spread radius</h1>

        <p>This shadow has a 5px value of blur-radius and spread-radius.</p>
        <h2 class="spread-5px">box-shadow: 10px 10px 5px 5px black;</h2>
        <p>This shadow has a 5px blur-radius and 10px spread-radius.</p>
        <h2 class="spread-10px">box-shadow: 10px 5px 10px 10px black;</h2>

        <p>This shadow has 5px value of spread-radius and no blur-radius.</p>
        <h2 class="no-blur">box-shadow: 10px 5px 0px 5px black;</h2>
    </body>

</html>
h2 {
    background-color: greenyellow;
}

h2.spread-5px {
    /* horizontal-offset | vertical-offset | blur-radius | spread-radius | shadow color */
    box-shadow: 10px 10px 5px 5px black;
}

h2.spread-10px {
    /* horizontal-offset | vertical-offset | blur-radius | spread-radius | shadow color */
    box-shadow: 10px 5px 10px 10px black;
}

h2.no-blur {
    /* horizontal-offset | vertical-offset | blur-radius | spread-radius | black default color */
    box-shadow: 10px 5px 0px 5px;
}

Browser Output

CSS Box Shadow Spread Example

Note: It's important to specify the value for the blur-radius before providing the value for the spread-radius. Otherwise, the spread radius will be mistakenly interpreted as the blur radius value.

If we don't want to include a blur effect, we can simply set the blur-radius to 0px.


Create even shadows

The shadows can be evenly distributed across all sides of the element. For this, we need to set the horizontal-offset and vertical-offset values to 0 and provide the blur-radius and spread-radius values.

This causes the shadow to be spread out evenly on all sides of the element.

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS box-shadow</title>
    </head>

    <body>
        <h1>Evenly Distributed Shadows</h1>

        <h2 class="first-shadow">box-shadow: 0px 0px 5px 2px purple;</h2>

        <h2 class="second-shadow">
            box-shadow: 0px 0px 10px 5px purple;
        </h2>

        <h2 class="third-shadow">box-shadow: 0px 0px 15px 8px purple;</h2>
    </body>

</html>
h2 {
    border: 2px solid black;
    margin-bottom: 50px;
}

h2.first-shadow {
    box-shadow: 0px 0px 5px 2px purple;
}

h2.second-shadow {
    box-shadow: 0px 0px 10px 5px purple;
}

h2.third-shadow {
    box-shadow: 0px 0px 15px 8px purple;
}

Browser Output

CSS Evenly Distributed Shadow Example

Create Inner Shadow

The inset value of the box-shadow property is used to create an inner shadow. By default, the shadow is created outside of the element.

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS box-shadow</title>
    </head>

    <body>
        <h1>The inset keyword</h1>

        <h2 class="shadow-one">box-shadow: inset 0px 0px 5px 2px purple;</h2>

        <h2 class="shadow-two">box-shadow: inset 0px 0px 10px 5px purple;</h2>

        <h2 class="shadow-three">
            box-shadow: inset 0px 0px 15px 8px purple;
        </h2>
    </body>

</html>
h2 {
    border: 2px solid black;
    margin-bottom: 50px;
}

h2.shadow-one {
    box-shadow: inset 0px 0px 5px 2px purple;
}

h2.shadow-two {
    box-shadow: inset 0px 0px 10px 5px purple;
}

h2.shadow-three {
    box-shadow: inset 0px 0px 15px 8px purple;
}

Browser Output

CSS Box Shadow Inset Example

Adding Multiple Box Shadows

Multiple shadows can be applied to an element by separating them with commas. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS box-shadow</title>
    </head>

    <body>
        <h1>Multiple Box Shadows</h1>

        <p>box-shadow: 8px 8px purple, 16px 16px yellow, 22px 22px green;</p>
    </body>

</html>
p {
    box-shadow: 8px 8px purple, 16px 16px yellow, 22px 22px green;
    background-color: greenyellow;
    padding: 20px;
}

Browser Output

CSS Multiple Box Shadow Example

In the above example, each shadow represents a separate shadow layer and is stacked on top of each other as specified.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges