<!-- Shadow utilities -->
<div class="shadow-none">No shadow (default)</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>

<!-- Custom shadow classes (via SCSS) -->
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-xxl">XXL shadow</div>

<!-- Inline shadows -->
<span class="shadow-sm d-inline-block p-2">Inline element with shadow</span>

<!-- Cards with shadows -->
<div class="card shadow-sm">Small shadow card</div>
<div class="card shadow">Regular shadow card</div>
<div class="card shadow-lg">Large shadow card</div>

<!-- Buttons with shadows -->
<button class="btn btn-primary shadow-sm">Button with shadow</button>
<button class="btn btn-success shadow">Button with regular shadow</button>
<button class="btn btn-warning shadow-lg">Button with large shadow</button>

<!-- Images with shadows -->
<img src="image.jpg" class="img-fluid shadow" alt="Image with shadow">

<!-- Text shadows (requires custom CSS) -->
<h1 class="text-shadow">Text with shadow</h1>

<!-- Default shadow values in Bootstrap -->
.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

/* Custom shadow classes (add via SCSS) */
.shadow-xl {
  box-shadow: 0 2rem 4rem rgba(0,0,0,.2) !important;
}

.shadow-xxl {
  box-shadow: 0 3rem 6rem rgba(0,0,0,.25) !important;
}

/* Inset shadow (custom) */
.shadow-inset {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.1) !important;
}

/* Multiple shadows (custom) */
.shadow-multi {
  box-shadow: 
    0 4px 6px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.08) !important;
}

Cards

Small Shadow

Card with subtle shadow.

Regular Shadow

Card with default shadow.

Buttons

Primary (sm)Success (regular)Warning (large)

Badges

Badge 1Badge 2Badge 3

Images & Avatars

JD

Alerts

Alert with small shadow

Navigation

Input Groups

Search

@

<!-- Cards with shadows -->
<div class="card shadow-sm">
  <div class="card-body">Small shadow card</div>
</div>

<div class="card shadow">
  <div class="card-body">Regular shadow card</div>
</div>

<div class="card shadow-lg">
  <div class="card-body">Large shadow card</div>
</div>

<!-- Buttons with shadows -->
<button class="btn btn-primary shadow-sm">Button</button>
<button class="btn btn-success shadow">Button</button>
<button class="btn btn-warning shadow-lg">Button</button>

<!-- Images with shadows -->
<img src="image.jpg" class="img-fluid rounded shadow" alt="Image">

<!-- Avatars with shadows -->
<div class="rounded-circle bg-primary shadow-lg" 
     style="width: 80px; height: 80px;">
  Avatar
</div>

<!-- Badges with shadows -->
<span class="badge bg-primary shadow-sm">Badge</span>
<span class="badge bg-success shadow">Badge</span>
<span class="badge bg-danger shadow-lg">Badge</span>

<!-- Navigation with shadow -->
<nav class="navbar navbar-light bg-light shadow">
  <!-- Nav content -->
</nav>

<!-- Input groups with shadows -->
<div class="input-group shadow">
  <input type="text" class="form-control">
  <button class="btn btn-primary">Button</button>
</div>

<!-- Alerts with shadows -->
<div class="alert alert-info shadow-sm">
  Alert message
</div>

<!-- List groups with shadows -->
<div class="list-group shadow">
  <div class="list-group-item">Item 1</div>
  <div class="list-group-item">Item 2</div>
</div>

Card with Hover Effect

Hover Card

Shadow increases on hover.

Button with Hover Effect

Hover over me

Image with Hover Effect

Animated Shadow on Click

Click me

Shadow Transition Classes

Effect	CSS Transition	Hover State	Use Case
Elevate	box-shadow 0.3s ease	.shadow → .shadow-lg	Cards, buttons
Press	all 0.2s ease	.shadow-lg → .shadow-sm	Clickable elements
Float	all 0.3s ease	Shadow + translateY(-5px)	Product cards

<!-- Hover shadow effects (custom CSS required) -->
<style>
  /* Simple hover elevation */
  .hover-shadow {
    transition: box-shadow 0.3s ease;
  }
  
  .hover-shadow:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
  }
  
  /* Button hover effect */
  .btn-hover-shadow {
    transition: all 0.3s ease;
  }
  
  .btn-hover-shadow:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    transform: translateY(-2px);
  }
  
  /* Click effect */
  .btn-click-shadow:active {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.1) !important;
    transform: translateY(2px);
  }
  
  /* Card hover with multiple shadows */
  .card-hover-effect {
    transition: all 0.3s ease;
  }
  
  .card-hover-effect:hover {
    box-shadow: 
      0 1rem 3rem rgba(0,0,0,.175),
      0 0.5rem 1rem rgba(0,0,0,.1) !important;
    transform: translateY(-5px);
  }
  
  /* Image hover with stronger shadow */
  .img-hover-shadow {
    transition: all 0.3s ease;
  }
  
  .img-hover-shadow:hover {
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,.25) !important;
  }
</style>

<!-- Usage -->
<div class="card shadow-sm hover-shadow">
  <!-- Hover to increase shadow -->
</div>

<button class="btn btn-primary shadow btn-hover-shadow">
  <!-- Hover for elevation effect -->
</button>

<img src="image.jpg" class="img-fluid rounded img-hover-shadow" alt="">

<!-- Bootstrap-only approach (no transitions) -->
<div class="shadow-sm shadow-hover shadow-lg-hover">
  <!-- Requires custom CSS for hover -->
</div>

<!-- Responsive shadow utilities -->
<div class="shadow-none shadow-md-sm shadow-lg-lg">
  <!-- 
    No shadow on mobile
    Small shadow on tablet
    Large shadow on desktop
  -->
</div>

<div class="shadow-lg shadow-md-none">
  <!-- 
    Large shadow on mobile
    No shadow on tablet+
  -->
</div>

<div class="shadow-sm shadow-lg-xl">
  <!-- 
    Small shadow on mobile
    Extra large shadow on desktop
  -->
</div>

<!-- All breakpoint variants -->
<div class="shadow-lg">Large always</div>
<div class="shadow-sm-lg">Large on sm+</div>
<div class="shadow-md-lg">Large on md+</div>
<div class="shadow-lg-lg">Large on lg+</div>
<div class="shadow-xl-lg">Large on xl+</div>

<div class="shadow-none">None always</div>
<div class="shadow-sm-none">None on sm+</div>
<div class="shadow-md-none">None on md+</div>

<!-- Practical examples -->
<!-- Mobile-optimized cards -->
<div class="card shadow-lg shadow-md-sm">
  <!-- More prominent on mobile, subtle on desktop -->
</div>

<!-- Desktop-optimized navigation -->
<nav class="navbar shadow-none shadow-lg-lg">
  <!-- No shadow on mobile, shadow on desktop -->
</nav>

<!-- Responsive buttons -->
<button class="btn btn-primary shadow shadow-lg-none">
  <!-- Shadow on mobile, none on desktop -->
</button>

<!-- Adaptive product cards -->
<div class="card shadow-sm shadow-md-lg shadow-xl-none">
  <!-- 
    Small on mobile
    Large on tablet
    None on large desktop
  -->
</div>

/* Custom shadow classes via SCSS */

// Inset shadow
.shadow-inset {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.1) !important;
}

// Multiple shadows
.shadow-multi {
  box-shadow: 
    0 4px 6px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.08) !important;
}

// Colored shadows using theme colors
.shadow-primary {
  box-shadow: 0 .5rem 1rem rgba(13, 110, 253, .15) !important;
}

.shadow-success {
  box-shadow: 0 .5rem 1rem rgba(25, 135, 84, .15) !important;
}

.shadow-danger {
  box-shadow: 0 .5rem 1rem rgba(220, 53, 69, .15) !important;
}

// Directional shadows
.shadow-top {
  box-shadow: 0 -4px 6px rgba(0,0,0,.1) !important;
}

.shadow-right {
  box-shadow: 4px 0 6px rgba(0,0,0,.1) !important;
}

.shadow-bottom {
  box-shadow: 0 4px 6px rgba(0,0,0,.1) !important;
}

.shadow-left {
  box-shadow: -4px 0 6px rgba(0,0,0,.1) !important;
}

// Blur-only shadow
.shadow-blur {
  box-shadow: 0 0 20px rgba(0,0,0,.1) !important;
}

// Glow effect
.shadow-glow {
  box-shadow: 0 0 20px rgba(13, 110, 253, .3) !important;
}

// Material Design elevation levels
.shadow-elevation-1 {
  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),
              0 1px 1px 0 rgba(0,0,0,.14),
              0 1px 3px 0 rgba(0,0,0,.12) !important;
}

.shadow-elevation-2 {
  box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),
              0 3px 4px 0 rgba(0,0,0,.14),
              0 1px 8px 0 rgba(0,0,0,.12) !important;
}

// Add to Bootstrap utilities
$utilities: map-merge(
  $utilities,
  (
    "shadow-inset": (
      property: box-shadow,
      class: shadow-inset,
      values: (
        null: inset 0 2px 4px rgba(0,0,0,.1),
      )
    ),
    "shadow-primary": (
      property: box-shadow,
      class: shadow-primary,
      values: (
        null: 0 .5rem 1rem rgba(13, 110, 253, .15),
      )
    ),
  )
);

@import "bootstrap/scss/bootstrap";