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 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
Please Login to comment...