boxShadow Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:boxShadow

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. boxShadow

Description

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

Property Values

ValueDescription
none Default value. No shadow is displayed
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
colorOptional. The color of the shadow. The default value is black.
insetOptional. Changes the shadow from an outer shadow to an inner shadow
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the box-shadow property of an element
CSS VersionCSS3

Add a box-shadow to a div element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from   ww  w .j a  va2s  .  co m
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

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

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

</body>
</html>

Related Tutorials