/

HTML / CSS / JavaScript Tutorial

CSS Property: box-shadow

[this page | pdf | back links]

The CSS (CSS3) box-shadow property applies one or more shadows to an element. The property is a comma-separated list of shadows, each specified by 2 to 4 length values, an optional colour and an optional inset keyword. If a length is omitted then it is taken to be zero.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

box-shadow parameter

See below

none

(default value). No shadow is displayed

 

Default Value:

none

JavaScript syntax:

e.g. object.style.boxShadow="5px 10px 15px red inset"

Inherited:

No

Animatable:

Yes

 

The parameters of the box-shadow parameter are:

 

Value

Description

h-shadow

Position of horizontal shadow (can be negative)

v-shadow

Position of vertical shadow (can be negative)

blur

Optional. Blur distance

spread

Optional. Size of shadow (can be negative)

color

Optional (for most browsers). Shadow CSS colour. Default value is black.

inset

Optional. Changes shadow from an outer shadow to an inner shadow

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile