Javascript Reference - HTML DOM Style boxShadow Property

The boxShadow property sets or gets the drop-shadows of a box element.

Browser Support


`boxShadow`	Yes	10.0	Yes	Yes	Yes

Syntax

Return the boxShadow property:

var v = object.style.boxShadow

Set the boxShadow property:

object.style.boxShadow='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

Technical Details

Default Value:	none
Return Value:	A string representing the box-shadow property
CSS Version	CSS3

Example

The following code shows how to add a box-shadow to a div element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--  w w  w  . j  av a 2  s  .  c  o m-->
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">myDIV</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.boxShadow = "10px 20px 30px red";
}
</script>

</body>
</html>

The code above is rendered as follows: