Box-shadow - Property CSS

box-shadow

Summary of characteristics of the `box-shadow` property

Quick description

Applies a shading effect to the frames by indicating all the parameters: color, shadow shift, blur, etc.

Status

Standard

Usable for

HTML

Predefined values

none | inset

Percentages

Not applicable.

Initial value

none

Inherited by default

No.

Animation type

Computed value : during an animation, the box-shadow property gradually changes from one value to another. ⁽¹⁾

W3C Module

CSS Backgrounds and Borders Module

References (W3C)

CSS Backgrounds and Borders Module Level 3

Document status: CR (Candidate Recommendation)

(1) Except for the inset value which is animated without transition (discrete). This value, when changed through animation, forces all other values to behave as discrete.

Syntax diagram of `box-shadow`.

Syntax diagram of the box-shadow property
The links in the diagram provide access to more details
Download the diagram in SVG

On the diagram, the terms in bold are the predefined words of CSS, the other terms are described below:

color is the color of the shading, in one of the syntaxes recognized by CSS. See Colors.
x and y are two numeric values followed by one of the CSS dimension units. These have the shift of the shadow.
blur is a numeric value followed by a unit of dimension, characterizing the blur of the shading.
spread is also a numeric value with a dimension unit. It is not possible to specify spread without having specified a value for blur.
Several such syntaxes can be repeated, separated by commas, to define multiple shadows.

Description of the `box-shadow` property.

box-shadow adds a shading effect to the element. There are many parameters that can be used to define this shadow: dimensions, color, blur effect, etc.
If the corners of the element are rounded (see border-radius), the shadow will also have rounded corners.

Example

The presence of a shadow on one element does not change the position of subsequent elements. The shadow can therefore encroach on other elements but always remain behind them.

LThe shading of box-shadow follows the overall shape of the element, which is rectangular. You can also see text-shadow to shade the text.

Values for `box-shadow`.

box-shadow: none;

Default. No shadows are added.
box-shadow: #808080 15px 15px 10px 5px inset col x y b a

General syntax of box-shadow: A series of space-separated values.

x

A positive or negative value followed by a dimension unit (see the CSS dimension units). This is the horizontal shift of the shadow.

y

A positive or negative value with a unit of dimension. This is the vertical shift of the shadow.

b

A positive value with a unit of dimension. It defines the ray of blur. A value of 0 or omitted indicates a sharp shadow.

a

A positive or negative value with a unit of dimension. Positive values indicate an enlargement of the shadow. And of course negative values, a reduction in the size of the shadow.
If a is greater than x or y, the shadow may appear all around the element.
When omitted, this value is set to 0.

col

A color indication (see Colors) which will be the color of the shadow. The default value is that of the text (currentColor).

inset

When present, this value indicates a shadow inside the element.

Apart from x and y, all of these values are optional, but they must be listed in that order.
box-shadow: blue 5px 5px 5px, green 10px 10px;

Multiple comma-separated series of values. Each set of values defines a shading. All the shading is applied to the element.

Values common to all properties:


box-shadow: initial  (none)
box-shadow: inherit
box-shadow: revert
box-shadow: revertLayer
box-shadow: unset

Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.

Examples.

Hard shadow: no blur, with a 10-pixel offset in either direction (horizontally and vertically).

Soft Shadow: With 15 pixel blur.
The rounded corners of the element are identical to the shading.

Interior shadow, giving the impression that the element is hollow.

15 pixel extended shadow. Because this value is greater than the offset (which is 5 pixels), the shadow appears all around the element.

This shadow has no offset; it is only extended. The shadow appears all around the element in a symmetrical manner.

Inverted Shadow: The x and y offsets have been set to -10 pixels.

Two shading has been applied to this element.

Animation of `box-shadow`.

The box-shadow property can be animated to one or more of its values. The numerical values gradually change from one value to another. Only the change in the value inset be abrupt, forcing the other stocks to evolve in a non-progressive way as well.

Here are examples of how to animate each of the values individually, but of course you can evolve multiple values in the same animation.

Offset animation
(x and y values).

Animating
the blur amount.

Shadow magnification
animation.

Shadow color
animation.

Animation including
inset value

Manipulating the `box-shadow` property by Javascript or JQuery.

Change the value of `box-shadow` by Javascript.

In Javascript, here's how to change the value of box-shadow for an el element. Javascript offers two syntaxes: the first with the name of the property written in kebab-case, and the second with the name of the property written in camel-case.


	let el = document.getElementById('id');
	el.style['box-shadow'] = 'red 5px 5px 2px';
	// or
	let el = document.getElementById('id');
	el.style.boxShadow = 'red 5px 5px 2px';

Read the value of `box-shadow` in Javascript.

For this code to work, the property must have been assigned directly to the element itself and not through a CSS selector. The value is returned as set.


	let el = document.getElementById('id');
	el.style['box-shadow'] = 'red 5px 5px 2px';
	// or
	let el = document.getElementById('id');
	el.style.boxShadow = 'red 5px 5px 2px';

Read the computed value of `box-shadow` in Javascript.

The calculated value is either the value applied by a style, or the value that results from the inheritance mechanism, or the initial value (none in the case of box-shadow).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('box-shadow');

Change the value of the `box-shadow` property with JQuery.

JQuery also recognizes the name of the property written in kebab-case or camel-case.


 $('#id').css('box-shadow', 'red 5px 5px 2px');
 // or
 $('#id').css('boxShadow', 'red 5px 5px 2px');

Read the computed value of the `box-shadow` property with JQuery.


	let value = $('#id').css('box-shadow');

Take the test yourself.

By clicking on the buttons below. The first displays the value as it was assigned to the item, unless it is a value Incorrect. And the second button displays the computed value. In particular, it should be noted that the colors are converted to rgb(), and that all dimensions are reduced to pixels.

Browser compatibility.

Column 1

Browser compatibility with the general syntax of the box-shadow CSS property.

Column 2

Support for inset value in box-shadow syntax.

Column 3

Correct handling of multiple shadows with the box-shadow property.

Notes:

(1) inset must be the last word in the declaration.

box-shadow
property

inset
value

Multiple
shadows

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Samsung Internet

Safari

Safari sur IOS

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`box-shadow` property historic.

CSS Backgrounds and Borders Module Level 3

First presentation of the box-shadow property.

August 02, 2002
Working Draft.
December 17, 2009
Candidate Recommendation.