Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to attach one or more drop-shadows to the box with JavaScript?
To attach one or more drop shadows to a box with JavaScript, you can use the box-shadow style property. You can specify the shadow's offset, blur radius, spread radius, and color by passing values for these properties in the box-shadow property.
Syntax
Following is the syntax to add one or more drop shadows to the box with JavaScript ?
box.style.boxShadow = "offset-x offset-y blur-radius spread-radius color";
Here the box.style.boxShadow property in JavaScript allows you to add one or more drop shadows to a box element. It takes the following parameters
offset-x ? This is the horizontal offset of the shadow. Positive values create a shadow on the right side of the box, while negative values create a shadow on the left side.
offset-y ? This is the vertical offset of the shadow. Positive values create a shadow on the bottom of the box, while negative values create a shadow on the top.
blur-radius ? This is the amount of blur applied to the shadow. A higher value will create a more diffuse shadow.
spread-radius ? This is the amount by which the shadow grows or shrinks. A positive value will cause the shadow to grow larger, while a negative value will cause it to shrink.
color ? This is the color of the shadow. It can be specified as a color name, a hex code, or an RGB value.
Example: Adding a Basic Drop Shadow
In the below example, we add a basic drop shadow of yellow color. We pass 6px, 12px and yellow as offset-x, offset-y and color parameters to the boxShadow property.
Adding one or more drop shadow to the box using JavaScript
Click on the button to add drop shadow
Box
Example: Adding a Blur Radius
In the below example, we add a blur radius of the box by passing one more parameter just before the color.
Adding one or more drop shadow to the box using JavaScript
Click on the buttons to add drop shadow ans shadow blur
Box
Example: Adding a Spread Radius
We can also add spread radius to controls how much a shadow grows by passing one more parameter before color.
Adding one or more drop shadow to the box using JavaScript
Click on the buttons to add drop shadow , shadow blur and Shadow Blur Spread
Box
In summary, to attach one or more drop shadows to a box with JavaScript, you can use the box-shadow style property. You can specify the shadow's offset, blur radius, spread radius, and color by passing values for these properties in the box-shadow property.
2K+ Views
