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
-
Economics & Finance
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 boxShadow style property. You can specify the shadow's horizontal offset, vertical offset, blur radius, spread radius, and color.
Syntax
Following is the syntax to add one or more drop shadows to the box with JavaScript:
element.style.boxShadow = "offset-x offset-y blur-radius spread-radius color";
Parameters
The boxShadow property accepts the following parameters:
offset-x ? Horizontal offset of the shadow. Positive values create a shadow on the right side, negative values on the left side.
offset-y ? Vertical offset of the shadow. Positive values create a shadow below the box, negative values above.
blur-radius ? Amount of blur applied to the shadow. Higher values create more diffuse shadows.
spread-radius ? How much the shadow grows or shrinks. Positive values expand the shadow, negative values shrink it.
color ? Shadow color (hex, RGB, color name, or rgba for transparency).
Example: Adding a Basic Drop Shadow
This example adds a simple drop shadow with horizontal and vertical offsets:
<html>
<head>
<style>
#box {
background-color: #333;
width: 200px;
color: white;
padding: 20px;
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h2>Adding Drop Shadow to Box</h2>
<p>Click the button to add a basic drop shadow:</p>
<div id="box">Sample Box</div>
<br>
<button onclick="addBasicShadow()">Add Basic Shadow</button>
<script>
const box = document.getElementById("box");
function addBasicShadow() {
box.style.boxShadow = "6px 12px yellow";
}
</script>
</body>
</html>
Example: Adding Blur Radius
This example demonstrates how adding a blur radius creates a softer shadow effect:
<html>
<head>
<style>
#box2 {
background-color: #333;
width: 200px;
color: white;
padding: 20px;
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h2>Adding Shadow with Blur Effect</h2>
<p>Compare sharp vs blurred shadows:</p>
<div id="box2">Sample Box</div>
<br>
<button onclick="addSharpShadow()">Sharp Shadow</button>
<button onclick="addBlurredShadow()">Blurred Shadow</button>
<script>
const box2 = document.getElementById("box2");
function addSharpShadow() {
box2.style.boxShadow = "6px 12px #ff6b35";
}
function addBlurredShadow() {
box2.style.boxShadow = "6px 12px 10px #ff6b35";
}
</script>
</body>
</html>
Example: Multiple Shadows
You can add multiple shadows by separating them with commas:
<html>
<head>
<style>
#box3 {
background-color: #333;
width: 200px;
color: white;
padding: 20px;
font-family: sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h2>Multiple Drop Shadows</h2>
<p>Adding multiple shadows with different colors:</p>
<div id="box3">Sample Box</div>
<br>
<button onclick="addMultipleShadows()">Add Multiple Shadows</button>
<button onclick="clearShadows()">Clear Shadows</button>
<script>
const box3 = document.getElementById("box3");
function addMultipleShadows() {
box3.style.boxShadow = "3px 3px 5px red, -3px -3px 5px blue, 6px -6px 5px green";
}
function clearShadows() {
box3.style.boxShadow = "none";
}
</script>
</body>
</html>
Shadow Properties Comparison
| Property | Effect | Example Value |
|---|---|---|
| offset-x | Horizontal position | 5px (right), -5px (left) |
| offset-y | Vertical position | 5px (down), -5px (up) |
| blur-radius | Shadow softness | 0px (sharp), 10px (soft) |
| spread-radius | Shadow size | 2px (larger), -2px (smaller) |
Conclusion
Use the boxShadow property to add attractive drop shadows to elements. Combine multiple shadows for creative effects, and adjust blur and spread values to achieve the desired visual impact.
2K+ Views
