The DOM Style boxShadow property is used to set or return the drop-shadow of an element.
Syntax:
- To get the boxShadow Property
object.style.boxShadow
- To set the boxShadow Property
object.style.boxShadow = "horizontal-offset vertical-offset blur spread color inset | none | initial | inherit"
Return Values: It returns a string value, which representing the box-shadow property of an element.
Property Values:
1. horizontal-offset vertical-offset: This is used to specify the position of the shadow in length units. Negative values are allowed.
Example-1:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
.elem {
border-style: solid;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<p class="elem">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles, quizzes and interview questions.
</p>
<button onclick="setShadow()"
style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = '10px 20px';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
2. blur: This is used to define the amount of blur to be used in the shadow.
Example-2:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
.elem {
border-style: solid;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<p class="elem">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</p>
<button onclick="setShadow()"
style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = '10px 20px 5px';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
3. spread: This is used to define the amount of spread of the shadow.
Example-3:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
.elem {
border-style: solid;
margin: 30px;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<p class="elem">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</p>
<button onclick="setShadow()"
style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = '10px 20px 0px 20px';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
4. color: This is used to define the color of the shadow to be used.
Example-4:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
.elem {
border-style: solid;
margin: 25px;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<p class="elem">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</p>
<button onclick="setShadow()"
style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = '10px 20px green';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
5. inset: This is used to set the shadow to an inner one. Normally a shadow is an outset, that is outside.
Example-5:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
.elem {
border-style: solid;
margin: 25px;
padding: 10px;
box-shadow: 10px 20px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<p class="elem">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</p>
<button onclick="setShadow()"
style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = '10px 20px inset';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
6. none: This is used to remove any shadow present. This is the default value.
Example-6:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
.elem {
border-style: solid;
margin: 10px;
padding: 10px;
box-shadow: 10px 20px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<p class="elem">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</p>
<button onclick="setShadow()"
style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = 'none';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
7. initial: This is used to set this property to its default value.
Example-7:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
.elem {
border-style: solid;
padding: 10px;
margin: 25px;
box-shadow: 10px 20px green;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<p class="elem">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</p>
<button onclick="setShadow()"
style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = 'initial';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
8. inherit: This inherits the property from its parent.
Example-8:
<!DOCTYPE html><html lang="en">
<head>
<title>
DOM Style boxShadow
</title>
<style>
#parent {
border-style: solid;
padding: 10px;
margin: 25px;
box-shadow: 5px 10px green;
}
.elem {
border-style: solid;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style boxShadow
</b>
<br>
<br>
<div id="parent">
<p class="elem">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions.
</p>
</div>
<br>
<button onclick="setShadow()" style="margin-top: 20px;">
Change boxShadow
</button>
<!-- Script to change boxShadow -->
<script>
function setShadow() {
elem = document.querySelector('.elem');
elem.style.boxShadow = 'inherit';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by boxShadow property are listed below:
- Google Chrome 10 and above
- Edge 12 and above
- Internet Explorer 9.0 and above
- Firefox 4 and above
- Opera 10.5 and above
- Apple Safari 5.1 and above