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 Set a Box-Shadow Only on the Left and Right Sides?
In this article, we'll learn how to create a box-shadow that appears only on the left and right sides of an element using CSS. Box shadows are popular for adding depth and dimension to web elements, but by default, shadows apply to all four sides. Here, we'll explore a simple method to achieve shadows only on the sides.
Syntax
selector {
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color,
horizontal-offset vertical-offset blur-radius spread-radius color;
}
Understanding Box-Shadow Parameters
| Parameter | Description |
|---|---|
| Horizontal Offset | Controls shadow placement horizontally (negative for left, positive for right) |
| Vertical Offset | Controls shadow placement vertically (set to 0 for side-only shadows) |
| Blur Radius | Makes the shadow softer or sharper |
| Spread Radius | Increases or decreases the shadow size (negative values shrink the shadow) |
Method: Using Multiple Box-Shadow Values
To create shadows only on the left and right sides, we use two separate shadow declarations separated by a comma. The key technique is using negative spread radius to hide the top and bottom shadows
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.box {
width: 300px;
height: 150px;
background-color: #4CAF50;
padding: 20px;
text-align: center;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: -10px 0 15px -5px rgba(0, 0, 0, 0.3), /* Left shadow */
10px 0 15px -5px rgba(0, 0, 0, 0.3); /* Right shadow */
}
</style>
</head>
<body>
<div class="box">Side-Only Box Shadow</div>
</body>
</html>
A green box with shadows only on the left and right sides appears on the page. The shadows create a depth effect while the top and bottom remain shadow-free.
Customizing the Shadow Effect
You can adjust the shadow intensity and size by modifying the values
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.subtle-shadow {
width: 250px;
height: 100px;
background-color: #2196F3;
margin: 20px;
padding: 15px;
text-align: center;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: -5px 0 8px -3px rgba(0, 0, 0, 0.2),
5px 0 8px -3px rgba(0, 0, 0, 0.2);
}
.strong-shadow {
width: 250px;
height: 100px;
background-color: #FF5722;
margin: 20px;
padding: 15px;
text-align: center;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: -15px 0 25px -8px rgba(0, 0, 0, 0.5),
15px 0 25px -8px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div>
<div class="subtle-shadow">Subtle Side Shadow</div>
<div class="strong-shadow">Strong Side Shadow</div>
</div>
</body>
</html>
Two boxes appear: one blue box with subtle side shadows and one red box with more pronounced side shadows. Both demonstrate different intensities of the side-only shadow effect.
Key Points
- Use negative horizontal offset for left shadow and positive for right shadow
- Set vertical offset to 0 to keep shadows on sides only
- Negative spread radius helps hide unwanted top/bottom shadow areas
- Comma-separated values allow multiple shadows on one element
Conclusion
Creating side-only box shadows requires using two shadow declarations with opposite horizontal offsets and negative spread radius. This technique allows you to add depth to elements while maintaining clean top and bottom edges.
432 Views
