HTML | DOM Style boxShadow Property
Last Updated :
08 Aug, 2022
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:
html
<!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:
html
<!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:
html
<!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:
html
<!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:
html
<!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:
html
<!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:
html
<!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:
html
<!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
Similar Reads
HTML DOM Style border Property
The HTML DOM Style border Property is used to set or return the style of an element's border. We can set the different styles of the border for individual sides (top, right, bottom, left). The border-style property can take multiple values for each side. SyntaxIt is used to return the Style Propert
2 min read
HTML DOM Style borderTop Property
The DOM style borderTop property is used to set or return the three different border-top property such as border-top-width, border-top-style, and border-top-color of an element. Syntax: It returns the borderTop property. object.style.borderTopIt is used to set the borderTop property. object.style.bo
2 min read
HTML | DOM Style cursor Property
The cursor property is used in HTML DOM to set or return the type of cursor to display for the mouse pointer. Syntax: Return the cursor property:object.style.cursorSet the cursor property:object.style.cursor=value Property Values: alias: This property is used to display the cursor's indication of so
4 min read
HTML | DOM Style borderTopWidth Property
The Style borderTopWidth property in HTML DOM is used to set or return the width of the top border of an element. Syntax: To get the borderTopWidth Propertyobject.style.borderTopWidthTo set the borderTopWidth Propertyobject.style.borderTopWidth = "thin | medium | thick | length | initial | inherit"
4 min read
HTML | DOM Style borderWidth Property
The borderWidth property in HTML DOM is used to set or return the width of the border element. Syntax: It is used to set the border of width. object.style.borderWidth = valueIt returns the border width property. object.style.borderWidth Return Value: It returns the selected border element with the g
4 min read
HTML DOM Style borderColor Property
The DOM Style borderColor property specifies the color of the element's border. It may be given explicitly, inherit from the parent or by default it will take the default value. Syntax: To get the border color property:object.style.borderColorTo set the border color property:object.style.borderColor
3 min read
HTML DOM Style borderLeft Property
HTML DOM Style borderLeft property allows manipulation of the left border style of an element via JavaScript. It controls the border's width, style, and color, affecting the element's visual presentation and layout. HTML DOM Style borderLeft Property Syntax:Get the borderLeft Property.object.style.b
2 min read
HTML DOM Style borderBottom Property
The DOM style borderBottom property is used to set or return the three different border-bottom properties such as border-bottom-width, border-bottom-style, and border-bottom-color of an element. Syntax: It returns the borderBottom Property.object.style.borderBottomIt is used to set the borderBottom
2 min read
HTML | DOM Style background Property
The Style background property in HTML DOM is a short hand property used to set or return the background of an element. It can help to manipulate one or more of eight background properties. Syntax: It returns the background property.object.style.backgroundIt is used to set the background property.obj
7 min read
HTML DOM Style display Property
The HTML DOM Style display property is used to set or return the display type of an element. It is similar to the visibility property, which displays or hides the element. With a slight difference in display: none, hiding the entire element, while visibility: hidden meaning only the contents of the
3 min read