Fandom

HTML & CSS Wiki

-webkit-box-shadow

649pages on
this wiki
Add New Page
Comments0 Share

The CSS -webkit-box-shadow Apple extension property applies a drop shadow effect to the border box of an object.

Values

Multiple values may be used by separating each one with a white space.

Value Description
inset

Default. If not specified, the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of inset changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn above background, but below border and content.

<offset-x> <offset-y> This is required. This are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. Examples of lengths are px, em, etc. If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).
<blur-radius> This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
<spread-radius> This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
<color> Uses a valid color name or color code as the value. If not specified, the color depends on the browser. In Gecko (Firefox), the value of the color property is used. WebKit's shadow is transparent and therefore useless if <color> is omitted.

See Also

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.