Bootstrap - Shadow Utilities

What Are Shadow Utilities?

In Bootstrap, shadow utilities are built-in classes that help you add or remove box shadows to elements (like cards, buttons, divs, etc.) — without writing any custom CSS.

A shadow is the slight blur or dark outline that appears around an element, giving it a 3D or elevated look.
Bootstrap provides simple classes to control how strong or light that shadow appears.

Why Use Shadows?

Shadows are often used to:

Make elements stand out from the background.
Add depth and a more modern, layered look.
Improve readability and focus on specific sections (like cards, modals, or buttons).

Instead of writing CSS like:

box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);

You can simply use:

<div class="shadow">...</div>

Available Shadow Classes

Bootstrap provides four main shadow levels:

Class	Description
`.shadow-none`	Removes any shadow (no shadow effect).
`.shadow-sm`	Adds a small and subtle shadow.
`.shadow`	Adds a regular/default shadow.
`.shadow-lg`	Adds a large/deeper shadow.

Examples

1. No Shadow

<div class="shadow-none p-3 mb-5 bg-light rounded">
  No shadow
</div>

➡ The element looks flat, without any shadow or elevation.

2. Small Shadow

<div class="shadow-sm p-3 mb-5 bg-body rounded">
  Small shadow
</div>

➡ The element gets a light and subtle shadow, good for a soft 3D look.

3. Regular Shadow

<div class="shadow p-3 mb-5 bg-body rounded">
  Regular shadow
</div>

➡ The element gets a medium shadow, the default level used in most Bootstrap components like cards.

4. Large Shadow

<div class="shadow-lg p-3 mb-5 bg-body rounded">
  Large shadow
</div>

➡ The element looks more elevated and stands out strongly from the background.

5. Using with Other Elements

You can use shadows on any element — not just boxes.

Example with a Button:

<button class="btn btn-primary shadow-sm">Small Shadow</button>
<button class="btn btn-primary shadow-lg">Large Shadow</button>

Example with a Card:

<div class="card shadow-lg" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Shadow Card</h5>
    <p class="card-text">This card uses a large shadow to stand out.</p>
  </div>
</div>

6. Responsive Shadows (Custom Use)

While Bootstrap doesn’t provide built-in responsive shadow classes (like .shadow-md-*),
you can combine them with responsive utilities (like d-none d-md-block) if needed.

Example:

<div class="shadow d-none d-md-block">
  Shadow only visible on medium screens and above
</div>

7. When to Use Each Shadow

Class	Best Used For	Visual Effect
`.shadow-none`	Flat designs	Removes all shadow
`.shadow-sm`	Buttons, subtle highlights	Very light shadow
`.shadow`	Cards, modals	Medium depth
`.shadow-lg`	Prominent boxes, featured sections	Strong depth, attention-grabbing

8. Example Comparison

<div class="container text-center my-5">
  <div class="row gy-4">
    <div class="col">
      <div class="shadow-none p-3 bg-light rounded">No Shadow</div>
    </div>
    <div class="col">
      <div class="shadow-sm p-3 bg-light rounded">Small Shadow</div>
    </div>
    <div class="col">
      <div class="shadow p-3 bg-light rounded">Regular Shadow</div>
    </div>
    <div class="col">
      <div class="shadow-lg p-3 bg-light rounded">Large Shadow</div>
    </div>
  </div>
</div>

This shows all shadow levels side by side for easy comparison.

In Summary

Class	Effect	Description
`.shadow-none`	No shadow	Flat look
`.shadow-sm`	Light shadow	Soft depth
`.shadow`	Default shadow	Balanced 3D effect
`.shadow-lg`	Large shadow	Strong, prominent effect

In Simple Words:

The .shadow-* utilities in Bootstrap let you quickly add or remove drop shadows to make elements look more elevated or layered — all without writing custom CSS.
Use .shadow-sm for subtle shadows, .shadow for normal ones, and .shadow-lg for bold, eye-catching depth.