CSS - box-shadow Property

The box-shadow property of CSS is useful in adding a shadow effect around an element. One or more shadow effects can be added, separated by commas.

The box shadow is described by X and Y offsets relative to the element, blur, spread radius and color.

Possible Values

  • inset:

    • Shadow is assumed to be a drop shadow, if no value is specified.

    • If inset is used, the shadow is drawn inside the border, above the background, but below content.

  • <offset-x>: Specifies the horizontal distance in <length> terms. Negative value positions the shadow to the left of element.

  • <offset-y>: Specifies the vertical distance in <length> terms. Negative value positions the shadow above the element.

  • <blur-radius>:

    • Sets the radius for the blur effect. Third <length> value.

    • Larger the value, bigger is the blur.

    • Negative values are not allowed.

    • In absence of a value, it is 0, which makes the edges of shadow sharp.

  • <spread-radius>:

    • Sets the size of the shadow. Fourth <length> value.

    • Positive values make the shadow to grow bigger.

    • Negative values make the shadow to shrink.

    • In absence of a value, it is 0, which makes the shadow of size same as the element.

  • <color>: Color values for possible keywords and color notations, such as, color name, hex value, rgb, etc.

Applies to

All the HTML elements.

DOM Syntax

object.style.boxShadow = "none | inset 10px 10px 5px rgb(255, 255, 255)";

CSS box-shadow - inset Value

Here is an example:

<html>
<style>
    div {
        margin: 4em;
        padding: 1em;
        height: 80px;
        width: 80px;
        display: inline-block;
    }
    #a {
        box-shadow:10px 10px 10px 2em #f4aab9;
    }
    #b {
        box-shadow:inset -20px -3em 3em rgba(228, 228, 35, 0.8);  
    }
    #c {
        box-shadow: 5px 15px 3px rgb(226, 67, 228); 
        border: 1px solid black; 
    }
</style>
<head>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>
Advertisements