ExampleAdd a box-shadow to a div element:
Try it yourself » More examples at the bottom of this page. |
The box-shadow property is only supported in Opera.
Firefox supports an alternative, the -moz-box-shadow property.
Safari and Chrome support an alternative, the -webkit-box-shadow property.
The box-shadow property attaches one or more drop-shadows to the box.
Default value: | none |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object.style.boxShadow="10px 10px 5px #888888" |
box-shadow: h-shadow v-shadow blur spread color inset; |
Note: The box-shadow property attaches one or more drop-shadows to the
box. The property is a comma-separated list of shadows, each specified by 2-4
length values, an optional color, and an optional inset keyword. Omitted
lengths are 0.
Value | Description |
---|---|
h-shadow | Required. The position of the horizontal shadow. Negative values are allowed |
v-shadow | Required. The position of the vertical shadow. Negative values are allowed |
blur | Optional. The blur distance |
spread | Optional. The size of shadow |
color | Optional. The color of the shadow |
inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow |
![]() |
Try it Yourself - Examples |
Images
thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the
pictures.