box-shadow property

The box-shadow property sets a box shadow. As a value, the property takes 6 parameters, listed separated by a space, or the none keyword, which cancels the shadow completely.

Syntax

selector {
	box-shadow: inset x-offset y-offset blur shadow-size color;
}

selector {
	box-shadow: none;
}

Parameters

Parameter	Description
`inset`	Optional parameter. If it is specified, then a shadow will be inside a container, if not specified, then it will be outside.
x-offset	Sets a shadow offset along the X axis. A positive value shifts to the right, a negative value shifts to the left.
y-offset	Sets a shadow offset along the Y axis. A positive value shifts down, a negative value shifts up.
blur	Sets shadow blur. The higher the value, the more blurry the shadow will be. Optional parameter. If not specified, the shadow will be clear.
shadow-size	Sets a shadow size. A positive value stretches a shadow, a negative value, on the contrary, compresses it. Optional parameter. If not specified, a shadow will be the same size as an element.
color	Sets a shadow color in any color units. Optional parameter. If not specified, the shadow color matches a text color.

Axis offsets, blur, and shadow size are specified in any size units, except percentages.

Example

In this example, the shadow has been moved down and to the right and a slight blur has been added:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Example . Clear shadow

In this example, the shadow is moved down and to the right, but there is no blur (the shadow will be clear):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Example . Uniform shadow

In this example, the shadow has not been moved, but a blur has been added to it:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Example . Shadow size

In this example, the shadow is not moved, the blur is zero, but size is added to it (black is the border, red is the shadow):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Example . Blur + shadow size

In this example, the shadow is not moved, but blur and size have been added to it (black is the border, red is the shadow):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Example . Inner shadow

In this example, the shadow is inside the container:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

box-shadow property

Syntax

Parameters

Example

Example . Clear shadow

Example . Uniform shadow

Example . Shadow size

Example . Blur + shadow size

Example . Inner shadow

See also