Style box Shadow Property

Style box Shadow Property

It adds shadow effects around an element's frame. You can set multiple effects separated by commas. It 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. 

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

property	chrome	firefox	microsoft edge	Opera
border-box-shadow	10.0 4.0 -webkit-	4.0 3.5 -moz-	9.0	10.5

 

Syntax

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

Example

Output

 

Property Values

Value	Description
none	Default value. No shadow is displayed
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
color	The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.
inset	Changes the shadow from an outer shadow (outset) to an inner shadow
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

 

Technical Details

Default value:	None
Version:	CSS3
inherited	No
Animatable	Yes
JavaScript syntax:	object.style.boxShadow="10px 20px 30px blue"