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.

REDUAN AHMAD
REDUAN AHMAD

Content Writer | Web Development & UI/UX Design Enthusiast | Clear, Engaging, SEO-Optimized Insights

Updated on: 2024-11-08T12:08:52+05:30

191 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements