CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 box-shadow Property
Example
Add a box-shadow to a div element:
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
Try it yourself »
More examples at the bottom of this page.
Browser Support
The box-shadow property is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.
Definition and Usage
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" |
Syntax
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 | Play it |
|---|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | Play it » |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed | Play it » |
| blur | Optional. The blur distance | Play it » |
| spread | Optional. The size of shadow | Play it » |
| color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values | Play it » |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | Play it » |
Try it Yourself - Examples
Images
thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the
pictures.
Related Pages
CSS3 tutorial: CSS3 Borders
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
