HTML | DOM Style boxShadow Property
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 >
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 >
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 >
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 >
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 >
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 >
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 >
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 >
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
Last Updated :
08 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...