Mastering Box Shadows: A Practical Guide with Bootstrap Cards

4 min readMay 4, 2023

Box shadow is a CSS property that allows you to create a shadow effect on an element. It can add depth and dimension to your design and create a more immersive user experience. There are several types of box shadows that you can use to achieve different effects, each with its own unique properties. In this article, we’ll explore the different types of box shadows and how you can use them in your designs.

Inset Box Shadow

An inset box shadow is a shadow that appears inside the element, rather than outside it. It can be used to create a 3D effect, and is often used to make elements look like they’re pressed into the page. To create an inset box shadow, use the inset keyword in your CSS:

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

The inset keyword tells the browser to create an inset shadow, and the 0 0 10px values define the size and position of the shadow. The final value, rgba(0, 0, 0, 0.5), defines the color and opacity of the shadow.

Outset Box Shadow

An outset box shadow is the opposite of an inset shadow — it appears outside the element, creating the illusion that the element is floating above the page. To create an outset box shadow, simply omit the inset keyword from your CSS:

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

This creates a shadow that appears outside the element, rather than inside it.

Multiple Box Shadows

You can also create multiple box shadows on an element to achieve more complex effects. To do this, simply separate each box shadow with a comma:

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);

This creates two box shadows on the element — an inset shadow and an outset shadow. The first shadow is positioned inside the element, while the second shadow is positioned outside it.

Spread and Blur

You can also adjust the spread and blur of a box shadow to achieve different effects. The spread property defines how much the shadow spreads out from the element, while the blur property defines how blurry the shadow is. For example:

box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);

This creates a shadow that is 10 pixels wide and 5 pixels spread out from the element. The rgba(0, 0, 0, 0.5) value defines the color and opacity of the shadow.

Box Shadow Color

Finally, you can adjust the color of a box shadow to achieve different effects. You can use any valid CSS color value for the shadow, including hex codes, RGB values, and color keywords. For example:

box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);

This creates a shadow that is red and has 50% opacity.

Working Example

<!DOCTYPE html>
<html>
<head>
  <title>Box Shadow Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
  <style>
    .card {
      margin: 20px;
      padding: 20px;
      border: none;
      border-radius: 10px;
      transition: box-shadow 0.3s;
    }

    .card:hover {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    .card.inset {
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .card.outset {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .card.multiple {
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
    }

    .card.blur {
      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
    }

    .card.color {
      box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <h3>Card 1</h3>
          <p>This is the first card.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card inset">
          <h3>Card 2</h3>
          <p>This is the second card with an inset shadow.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card outset">
          <h3>Card 3</h3>
          <p>This is the third card with an outset shadow.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="card multiple">
          <h3>Card 4</h3>
          <p>This is the fourth card with multiple shadows.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card blur">
          <h3>Card 5</h3>
          <p>This is the fifth card with a blurred shadow.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card color">
          <h3>Card 6</h3>
          <p>This is the sixth card with a red shadow.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

This example creates six Bootstrap cards with different box shadows. The first card has a simple hover effect that adds a shadow to the card when the mouse is over it. The second card has an inset shadow, the third card has an outset shadow, the fourth card has multiple shadows, the fifth card

Check the example live at : https://codepen.io/dextrop/pen/YzJEOGr

Conclusion

Box shadow is a powerful CSS property that can add depth and dimension to your designs. By understanding the different types of box shadows and how to use them, you can create complex and visually appealing effects on your web pages.