CSS Property box-shadow
The box-shadow
CSS property sets one or more shadow effects as a comma-separated list.
Summary
- Initial value
- none
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.boxShadow="10px 20px 30px blue"
- Animatable
- Yes
CSS Syntax
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Property Values
- none
- Default value. No shadow is displayed
- h-shadow
- Required. The position of the horizontal shadow. Negative values allowed.
- v-shadow
- Required. The position of the vertical shadow. Negative values allowed
- blur
- Optional. The blur distance
- spread
- Optional. The size of shadow
- color
- Optional. The color of the shadow. The default value is black.
- inset
- Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
box-shadow |
Yes | 9.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- w ww . j a v a 2 s . c om-->
width: 300px;
height: 300px;
background-color: red;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>