CSS box-shadow Property

In CSS, the box-shadow property is used to give the frames of an element a shadow-like effect. The comma-separated element's frame can have multiple effects applied to it. The box-shadow can be described using the element's X and Y offsets, blur and spread radius, and color .

h-offset:

This specifies the horizontal position of the shadow. A positive value is used to set the shadow on the right side of the box, while a negative value is used to set the shadow on the left side.

v-offset:

The position of the shadow value must be set vertically. A positive value is used to set the shadow beneath the box, while a negative value is used to set the shadow above the box.

blur:

This is an optional attribute that works to blur the shadow of the box.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 10px;
    }

    .ex2 {
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 10px #00ab55;
    }

    .ex3 {
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 10px #ffc107;
    }
</style>
</head>
<body>

<div class="ex1"><p>box-shadow: 5px 10px </p></div><br><br>
<div class="ex2"><p>box-shadow: 5px 10px #00ab55</p></div><br><br>
<div class="ex3"><p>box-shadow: 5px 10px #ffc107</p></div>

</body>
</html>

Preview

Property Values

Value	Description
none	The default value. There is no shadow visible.
h-offset	Required. The shadow's horizontal offset. A positive value places the shadow on the right side of the box, while a negative value places the shadow on the left side.
v-offset	Required. The shadow's vertical offset. A positive value places the shadow below the box, while a negative value places it above the box.
blur	The radius of blur. The greater the number, the more blurred the shadow.
spread	The radius of spread. A positive value increases the size of the shadow, while a negative value decreases its size.
color	The color of the shadow is optional. The text color is the default value. For a complete list of color values, see CSS Color Values. Please keep in mind that the color parameter is required in Safari (on PC). If no color is specified, the shadow is not displayed at all.
inset	Changes the shadow from an outer (outset) to an inner (inner) shadow.
initial	This property is set to its default value. Learn more about the beginning.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
box-shadow	10.0 4.0 -webkit-	4.0 3.5 -moz-	5.1 3.1 -webkit-	9.0	10.5

box-decoration-break

box-sizing