Basic Shadows
Standard box shadow utilities for adding depth to elements
.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-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
.shadow-inner-sm
Small inner
.shadow-inner
Default inner
.shadow-inner-md
Medium inner
.shadow-inner-lg
Large inner
<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
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="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>Material Design Elevation
Elevation levels inspired by Material Design principles
.elevation-0
Flat (0dp)
.elevation-1
1dp elevation
.elevation-2
2dp elevation
.elevation-3
3dp elevation
.elevation-4
4dp elevation
.elevation-5
5dp elevation
Note: Hover over elevation cards to see the lift effect
Shadow Hover Effects
Add shadow on hover for interactive feedback
.shadow-hover
Shadow on hover
.shadow-lg-hover
Large on hover
.shadow-lift-hover
Lift on hover
.shadow-none-hover
Remove on hover
<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
Floating Action Button
Form Fields
Modal Dialog
Modal Title
Modals use extra large shadows to separate from background
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
box-shadow: 0 15px 35px rgba(147, 51, 234, 0.4)
Class 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