Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 few simple methods to achieve shadows only on the sides.
What is Box-Shadow in CSS?
The box-shadow property in CSS adds shadow effects around an element. By adjusting values like offset, blur, and spread, you can control the size, direction, and intensity of the shadow.
Key elements of a box-shadow
- Horizontal Offset: Controls shadow placement horizontally.
- Vertical Offset: Controls shadow placement vertically.
- Blur Radius: Makes the shadow softer or sharper.
- Spread Radius: Increases or decreases the shadow size.
Step-by-Step Adding Side-Only Box Shadows
- Step 1 - Basic HTML Structure: Let's start with a simple HTML structure to apply the shadow effects.
- Step 2 - Adding Styles with CSS Now: let's add the CSS styling to apply the box-shadow on the left and right sides only.
HTML Code
Creating a structure where we will apply shadows on the left and right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Side-Only Box Shadow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Side-Only Box Shadow</div>
</body>
</html>
CSS Code
Explanation of Key CSS Properties
- Horizontal Offset: We set -5px for the left side shadow and 5px for the right side. This positions the shadow only on the sides.
- Blur Radius: Setting this to 10px adds a soft effect to the shadow.
- Color: The RGBA color rgba(0, 0, 0, 0.2) makes the shadow slightly transparent.
Customizing the Side-Only Shadow Effect
You can customize the side-only shadow by adjusting these values:
box-shadow: -8px 0 12px rgba(0, 0, 0, 0.3), /* Left shadow */ 8px 0 12px rgba(0, 0, 0, 0.3); /* Right shadow */
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centering the Box */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
/* Box Styling */
.box {
width: 300px;
height: 200px;
padding: 20px;
background: green;
text-align: center;
box-shadow: 15px 0 15px -10px rgba(0, 0, 0, 0.75), -15px 0 15px -10px rgba(0, 0, 0, 0.75);
/* Right shadow */
font-size: 1.2em;
}
Complete Code to Set Box-Shadow on Left and Right Side
Here's the full code to create a box with shadows only on the left and right sides.
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-Only Box Shadow</title>
<style>
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centering the Box */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
/* Box Styling */
.box {
width: 300px;
height: 200px;
padding: 20px;
background: green;
text-align: center;
box-shadow: 15px 0 15px -10px rgba(0, 0, 0, 0.75), -15px 0 15px -10px rgba(0, 0, 0, 0.75);
/* Right shadow */
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="box">Side-Only Box Shadow</div>
</body>
</html>
Output
In this article, we learned how to create a box-shadow that appears only on the left and right sides of an element using CSS.
203 Views
