Shadow Effects

Box shadows and elevation utilities for depth and visual hierarchy

basic-shadows

Standard box shadow utilities for adding depth to elements

basic-shadows
.shadow-none

No shadow

.shadow-sm

Small shadow

.shadow

Default shadow

.shadow-md

Medium shadow

.shadow-lg

Large shadow

.shadow-xl

Extra large

.shadow-2xl

2X large

.shadow-3xl

3X large

<div class="shadow-box shadow-none">
    <div>
        <code>.shadow-none</code>
        <p class="text-muted mt-2 mb-0">No shadow</p>
    </div>
</div>
<div class="shadow-box shadow-sm">
    <div>
        <code>.shadow-sm</code>
        <p class="text-muted mt-2 mb-0">Small shadow</p>
    </div>
</div>
<div class="shadow-box shadow">
    <div>
        <code>.shadow</code>
        <p class="text-muted mt-2 mb-0">Default shadow</p>
    </div>
</div>
<div class="shadow-box shadow-md">
    <div>
        <code>.shadow-md</code>
        <p class="text-muted mt-2 mb-0">Medium shadow</p>
    </div>
</div>
<div class="shadow-box shadow-lg">
    <div>
        <code>.shadow-lg</code>
        <p class="text-muted mt-2 mb-0">Large shadow</p>
    </div>
</div>
<div class="shadow-box shadow-xl">
    <div>
        <code>.shadow-xl</code>
        <p class="text-muted mt-2 mb-0">Extra large</p>
    </div>
</div>
<div class="shadow-box shadow-2xl">
    <div>
        <code>.shadow-2xl</code>
        <p class="text-muted mt-2 mb-0">2X large</p>
    </div>
</div>
<div class="shadow-box shadow-3xl">
    <div>
        <code>.shadow-3xl</code>
        <p class="text-muted mt-2 mb-0">3X large</p>
    </div>
</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>

inner-shadows

Inset shadows for creating depth within elements

inner-shadows
.shadow-inner-sm

Small inner

.shadow-inner

Default inner

.shadow-inner-md

Medium inner

.shadow-inner-lg

Large inner

<div class="shadow-box shadow-inner-sm">
    <div>
        <code>.shadow-inner-sm</code>
        <p class="text-muted mt-2 mb-0">Small inner</p>
    </div>
</div>
<div class="shadow-box shadow-inner">
    <div>
        <code>.shadow-inner</code>
        <p class="text-muted mt-2 mb-0">Default inner</p>
    </div>
</div>
<div class="shadow-box shadow-inner-md">
    <div>
        <code>.shadow-inner-md</code>
        <p class="text-muted mt-2 mb-0">Medium inner</p>
    </div>
</div>
<div class="shadow-box shadow-inner-lg">
    <div>
        <code>.shadow-inner-lg</code>
        <p class="text-muted mt-2 mb-0">Large inner</p>
    </div>
</div>
<div class="shadow-inner">Inner shadow for depth</div>
<input class="form-control shadow-inner" placeholder="Input with inner shadow">

coloured-shadows

Theme-aware coloured shadows for visual emphasis

coloured-shadows

Primary

.shadow-primary

Primary colour shadow for brand emphasis

Secondary

.shadow-secondary

Secondary colour shadow for supporting elements

Success

.shadow-success

Success colour shadow for positive states

Warning

.shadow-warning

Warning colour shadow for caution states

Danger

.shadow-danger

Danger colour shadow for error states

Info

.shadow-info

Info colour shadow for informational elements

<div class="col-lg-4 col-md-6">
    <div class="card shadow-primary">
        <div class="card-body text-center py-5">
            <h4 class="text-primary mb-3">Primary</h4>
            <code>.shadow-primary</code>
            <p class="text-muted mt-3 mb-0">Primary colour shadow for brand emphasis</p>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card shadow-secondary">
        <div class="card-body text-center py-5">
            <h4 class="text-secondary mb-3">Secondary</h4>
            <code>.shadow-secondary</code>
            <p class="text-muted mt-3 mb-0">Secondary colour shadow for supporting elements</p>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card shadow-success">
        <div class="card-body text-center py-5">
            <h4 class="text-success mb-3">Success</h4>
            <code>.shadow-success</code>
            <p class="text-muted mt-3 mb-0">Success colour shadow for positive states</p>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card shadow-warning">
        <div class="card-body text-center py-5">
            <h4 class="text-warning mb-3">Warning</h4>
            <code>.shadow-warning</code>
            <p class="text-muted mt-3 mb-0">Warning colour shadow for caution states</p>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card shadow-danger">
        <div class="card-body text-center py-5">
            <h4 class="text-danger mb-3">Danger</h4>
            <code>.shadow-danger</code>
            <p class="text-muted mt-3 mb-0">Danger colour shadow for error states</p>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-6">
    <div class="card shadow-info">
        <div class="card-body text-center py-5">
            <h4 class="text-info mb-3">Info</h4>
            <code>.shadow-info</code>
            <p class="text-muted mt-3 mb-0">Info colour shadow for informational elements</p>
        </div>
    </div>
</div>
<div class="card shadow-primary">Primary shadow</div>
<button class="btn btn-success shadow-success">Success button</button>
<div class="alert alert-danger shadow-danger">Danger alert</div>

elevation-system

Elevation levels inspired by Material Design principles

elevation-system
.elevation-0

Flat (0dp)

.elevation-1

1dp elevation

.elevation-2

2dp elevation

.elevation-3

3dp elevation

.elevation-4

4dp elevation

.elevation-5

5dp elevation

<div class="elevation-demo elevation-0">
    <div>
        <code>.elevation-0</code>
        <p class="text-muted mt-2 mb-0">Flat (0dp)</p>
    </div>
</div>
<div class="elevation-demo elevation-1">
    <div>
        <code>.elevation-1</code>
        <p class="text-muted mt-2 mb-0">1dp elevation</p>
    </div>
</div>
<div class="elevation-demo elevation-2">
    <div>
        <code>.elevation-2</code>
        <p class="text-muted mt-2 mb-0">2dp elevation</p>
    </div>
</div>
<div class="elevation-demo elevation-3">
    <div>
        <code>.elevation-3</code>
        <p class="text-muted mt-2 mb-0">3dp elevation</p>
    </div>
</div>
<div class="elevation-demo elevation-4">
    <div>
        <code>.elevation-4</code>
        <p class="text-muted mt-2 mb-0">4dp elevation</p>
    </div>
</div>
<div class="elevation-demo elevation-5">
    <div>
        <code>.elevation-5</code>
        <p class="text-muted mt-2 mb-0">5dp elevation</p>
    </div>
</div>

Note: Hover over elevation cards to see the lift effect

hover-effects

Add shadow on hover for interactive feedback

hover-effects
.shadow-hover

Shadow on hover

.shadow-lg-hover

Large on hover

.shadow-lift-hover

Lift on hover

.shadow-none-hover

Remove on hover

<div class="shadow-box shadow-hover">
    <div>
        <code>.shadow-hover</code>
        <p class="text-muted mt-2 mb-0">Shadow on hover</p>
    </div>
</div>
<div class="shadow-box shadow-lg-hover">
    <div>
        <code>.shadow-lg-hover</code>
        <p class="text-muted mt-2 mb-0">Large on hover</p>
    </div>
</div>
<div class="shadow-box shadow-lift-hover">
    <div>
        <code>.shadow-lift-hover</code>
        <p class="text-muted mt-2 mb-0">Lift on hover</p>
    </div>
</div>
<div class="shadow-box shadow-none-hover shadow-lg">
    <div>
        <code>.shadow-none-hover</code>
        <p class="text-muted mt-2 mb-0">Remove on hover</p>
    </div>
</div>
<button class="btn shadow-hover">Hover for shadow</button>
<div class="card shadow-lift-hover">Card lifts on hover</div>

practical-examples

Real-world use cases for shadow effects

Cards with Depth

Standard Card

Default shadow for cards

Interactive Card

Lifts on hover interaction

Elevated Card

Material Design elevation

<div class="row g-4">
    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-body">
                <h4 class="card-title">Standard Card</h4>
                <p class="card-text">Default shadow for cards</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow-lg shadow-lift-hover">
            <div class="card-body">
                <h4 class="card-title">Interactive Card</h4>
                <p class="card-text">Lifts on hover interaction</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card elevation-3">
            <div class="card-body">
                <h4 class="card-title">Elevated Card</h4>
                <p class="card-text">Material Design elevation</p>
            </div>
        </div>
    </div>
</div>
Floating Action Button
<div class="text-center p-4">
    <button type="button" class="btn btn-primary btn-circle elevation-3 shadow-lift-hover" style="width: 56px; height: 56px; border-radius: 50%; font-size: 24px;">
        +
    </button>
</div>
Form Fields
<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label">Standard Input</label>
        <input type="text" class="form-control" placeholder="Normal input">
    </div>
    <div class="col-md-6">
        <label class="form-label">Inset Input</label>
        <input type="text" class="form-control shadow-inner" placeholder="Input with inner shadow">
    </div>
</div>
Modal Dialog

Modal Title

Modals use extra large shadows to separate from background

<div class="dark-bg">
    <div class="card shadow-2xl" style="max-width: 500px; margin: 0 auto;">
        <div class="card-header">
            <h4 class="mb-0">Modal Title</h4>
        </div>
        <div class="card-body">
            <p>Modals use extra large shadows to separate from background</p>
        </div>
        <div class="card-footer">
            <button type="button" class="btn btn-primary shadow-hover">Action</button>
        </div>
    </div>
</div>

css-variables

Customize shadows using CSS custom properties

/* Shadow variables */
:root {
    --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dm-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --dm-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.1);
    --dm-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --dm-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    --dm-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.2);
    
    /* Coloured shadows */
    --dm-shadow-primary: 0 10px 25px rgba(59, 130, 246, 0.3);
    --dm-shadow-success: 0 10px 25px rgba(34, 197, 94, 0.3);
    --dm-shadow-danger: 0 10px 25px rgba(239, 68, 68, 0.3);
}

/* Custom shadow */
.custom-shadow {
    box-shadow: 0 15px 35px rgba(147, 51, 234, 0.4);
}

Custom Example

Custom Purple Shadow

box-shadow: 0 15px 35px rgba(147, 51, 234, 0.4)

reference

Basic Shadow Classes

  • .shadow-none - Remove shadow
  • .shadow-sm - Small shadow
  • .shadow - Default shadow
  • .shadow-md - Medium shadow
  • .shadow-lg - Large shadow
  • .shadow-xl - Extra large shadow
  • .shadow-2xl - 2X large shadow
  • .shadow-3xl - 3X large shadow

Inner Shadow Classes

  • .shadow-inner-sm - Small inner shadow
  • .shadow-inner - Default inner shadow
  • .shadow-inner-md - Medium inner shadow
  • .shadow-inner-lg - Large inner shadow

Coloured Shadow Classes

  • .shadow-primary - Primary colour shadow
  • .shadow-secondary - Secondary colour shadow
  • .shadow-success - Success colour shadow
  • .shadow-warning - Warning colour shadow
  • .shadow-danger - Danger colour shadow
  • .shadow-info - Info colour shadow

Elevation Classes

  • .elevation-0 - No elevation (flat)
  • .elevation-1 - 1dp elevation
  • .elevation-2 - 2dp elevation
  • .elevation-3 - 3dp elevation
  • .elevation-4 - 4dp elevation
  • .elevation-5 - 5dp elevation

Hover Classes

  • .shadow-hover - Add shadow on hover
  • .shadow-lg-hover - Large shadow on hover
  • .shadow-lift-hover - Lift effect with shadow on hover
  • .shadow-none-hover - Remove shadow on hover