Shadow utilities add or remove box shadows: shadow-sm for subtle depth, shadow for regular elevation and shadow-lg for floating elements, while shadow-none removes a component's default shadow. Use stronger shadows for elements that sit above others, such as menus, dialogs and floating buttons.
1Shadow sizes
shadow-none, shadow-sm, shadow and shadow-lg.
shadow-noneshadow-smshadowshadow-lg<div class="row g-4 p-2">
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-none border">
<code class="small">shadow-none</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-sm">
<code class="small">shadow-sm</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-md">
<code class="small">shadow</code>
</div>
</div>
<div class="col-6 col-md-3">
<div class="bg-page rounded-lg p-4 text-center shadow-xl">
<code class="small">shadow-lg</code>
</div>
</div>
</div>2Floating card
shadow-lg and rounded-4 lift a profile card off the page.
Ivy Ortega
Operations Manager
<div class="bg-page rounded-xl shadow-xl p-6 text-center mx-auto" style="max-width:18rem">
<img src="../assets/img/avatar-3.svg" alt="Luna Kim" width="72" height="72" class="rounded-full mb-2">
<div class="font-semibold">
Ivy Ortega
</div>
<div class="small text-muted mb-4">
Operations Manager
</div>
<button type="button" class="btn btn-sm btn-primary">Follow</button>
</div>3Subtle input shadow
shadow-sm on a search field gives it a little depth.
<div style="max-width:22rem">
<label class="sr-only" for="ut-find-1255">Search</label>
<input id="ut-find-1255" type="search" class="form-control form-control-lg shadow-sm rounded-full" placeholder="Search Home">
</div>4Remove a component shadow
shadow-none removes the default focus or component shadow when you need a flat look.
<div class="flex flex-wrap gap-2">
<button type="button" class="btn btn-primary shadow-md">With shadow</button>
<button type="button" class="btn btn-primary shadow-none">shadow-none</button>
</div>5Sticky header shadow
A header bar with shadow-sm separates itself from scrolling content.
Xenoara Pro
Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.
<div class="border rounded-lg overflow-hidden">
<div class="bg-page shadow-sm px-4 py-2 flex justify-between items-center relative">
<span class="font-semibold">Xenoara Pro</span><span><i class="bi bi-list" aria-hidden="true"></i></span>
</div>
<div class="bg-surface-3 p-4 small">
Our packaging is plastic-free and every delivery is carbon-neutral. Order before 2 pm and most items leave our warehouse the same day.
</div>
</div>6Pricing card emphasis
The featured plan has shadow-lg, its neighbours shadow-sm.
Starter
$10.06
Popular
$34.90
Business
$71.52
<div class="row g-3 items-center p-2">
<div class="col-sm-4">
<div class="bg-page rounded-xl shadow-sm p-4 text-center">
<div class="small">
Starter
</div>
<div class="text-xl font-bold">
$10.06
</div>
</div>
</div>
<div class="col-sm-4">
<div class="bg-page rounded-xl shadow-xl p-6 text-center border border-primary">
<div class="small text-primary-ink font-semibold">
Popular
</div>
<div class="text-2xl font-bold">
$34.90
</div>
</div>
</div>
<div class="col-sm-4">
<div class="bg-page rounded-xl shadow-sm p-4 text-center">
<div class="small">
Business
</div>
<div class="text-xl font-bold">
$71.52
</div>
</div>
</div>
</div>7Dropdown-like panel
A static menu with shadow and rounded-3, as a dropdown would look when open.
<div class="bg-page border rounded-lg shadow-md py-2" style="max-width:14rem">
<a href="#" class="block px-4 py-1 link-body-emphasis no-underline"><i class="bi bi-person-fill" aria-hidden="true"></i> Profile</a> <a href="#" class="block px-4 py-1 link-body-emphasis no-underline"><i class="bi bi-gear-fill" aria-hidden="true"></i> Settings</a>
<hr class="my-2">
<a href="#" class="block px-4 py-1 link-danger no-underline"><i class="bi bi-box-arrow-right" aria-hidden="true"></i> Sign out</a>
</div>8Toast-like notification
A small notice with shadow-lg and a coloured side border.
Saved
Gift wrapping and a handwritten note are free on every order.
<div class="bg-page rounded-lg shadow-xl border-s border-4 border-success p-4 flex gap-2" style="max-width:22rem" role="status">
<span class="text-success-emphasis text-lg"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>
<div>
<div class="font-semibold">
Saved
</div>
<div class="small text-muted">
Gift wrapping and a handwritten note are free on every order.
</div>
</div>
</div>9Image with shadow
Photos with rounded-4 and shadow look like printed cards.
<div class="flex flex-wrap gap-6 p-2">
<img src="https://images.unsplash.com/photo-1567401893414-76b7b1e5a7a5?auto=format&fit=crop&w=1200&h=800&q=70" alt="Meet the makers behind our ceramics" width="160" class="rounded-xl shadow-md"> <img src="https://images.unsplash.com/photo-1567958451986-2de427a4a0be?auto=format&fit=crop&w=1200&h=800&q=70" alt="Five things we learned this year" width="160" class="rounded-xl shadow-xl">
</div>10Floating action button
A round button with shadow-lg in a corner of a panel.
Thousands of shoppers already trust us, and we work hard to keep it that way.
<div class="relative bg-surface-3 border rounded-xl" style="height:160px">
<p class="small text-muted p-4 mb-0">Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
<button type="button" class="btn btn-primary rounded-full shadow-xl absolute bottom-0 end-0 m-4 flex items-center justify-center" style="width:52px;height:52px" aria-label="Add"><i class="bi bi-plus-lg" aria-hidden="true"></i></button>
</div>11Elevation levels
Stacked layers with increasing shadows show elevation order.
Level 1 - shadow-sm
Level 2 - shadow
Level 3 - shadow-lg
<div class="bg-surface-3 rounded-xl p-6">
<div class="bg-page rounded-lg shadow-sm p-4">
<div class="small mb-2">
Level 1 - shadow-sm
</div>
<div class="bg-page rounded-lg shadow-md p-4">
<div class="small mb-2">
Level 2 - shadow
</div>
<div class="bg-page rounded-lg shadow-xl p-4 small">
Level 3 - shadow-lg
</div>
</div>
</div>
</div>12Stat cards
shadow-sm with no border for soft dashboard tiles.
Orders
446
Revenue
$13,823.31
<div class="row g-3 p-1">
<div class="col-6">
<div class="bg-page rounded-xl shadow-sm p-4">
<div class="small text-muted">
Orders
</div>
<div class="text-xl font-bold">
446
</div>
</div>
</div>
<div class="col-6">
<div class="bg-page rounded-xl shadow-sm p-4">
<div class="small text-muted">
Revenue
</div>
<div class="text-xl font-bold">
$13,823.31
</div>
</div>
</div>
</div>13Modal-like dialog
A static dialog box with shadow-lg over a dimmed area.
Delete project?
This cannot be undone.
<div class="bg-dark/25 rounded-xl p-6 flex justify-center">
<div class="bg-page rounded-xl shadow-xl p-6" style="max-width:20rem" role="dialog" aria-label="Confirm">
<h3 class="h6 font-semibold">Delete project?</h3>
<p class="small text-muted">This cannot be undone.</p>
<div class="flex gap-2 justify-end">
<button type="button" class="btn btn-sm btn-light">Cancel</button>
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</div>
</div>
</div>14Product tile
shadow-sm on the product card and shadow on the price chip.
$120.73
Wool scarf
Apparel
<div class="bg-page rounded-xl shadow-sm overflow-hidden relative" style="max-width:16rem">
<img src="../assets/img/product-5.svg" alt="Wool scarf" class="w-full block"> <span class="absolute top-0 end-0 m-2 bg-page rounded-full px-2 py-1 small font-bold shadow-md">$120.73</span>
<div class="p-4">
<div class="font-medium">
Wool scarf
</div>
<div class="small text-muted">
Apparel
</div>
</div>
</div>15Callout box
A tip box with shadow-sm and a tinted background.
Start in minutes and get help from a real person whenever you need it.
<div class="bg-info-subtle text-info-emphasis rounded-xl shadow-sm p-4 flex gap-4">
<span class="text-xl"><i class="bi bi-lightbulb-fill" aria-hidden="true"></i></span>
<p class="mb-0 small">Start in minutes and get help from a real person whenever you need it.</p>
</div>16Tooltip-like label
A tiny dark label with shadow pointing at a chart value.
675
<div class="flex items-end gap-2" style="height:120px">
<div class="bg-primary-subtle rounded-t-md w-1/4 h-1/2">
</div>
<div class="bg-primary rounded-t-md w-1/4 h-full relative">
<span class="absolute top-0 start-1/2 -translate-x-1/2 -translate-y-1/2 text-bg-dark rounded-md px-2 py-1 small shadow-md whitespace-nowrap">675</span>
</div>
<div class="bg-primary-subtle rounded-t-md w-1/4 h-3/4">
</div>
<div class="bg-primary-subtle rounded-t-md w-1/4 h-1/4">
</div>
</div>17Navigation bar shadow
A light navbar with shadow instead of a border.
<nav class="bg-page rounded-lg shadow-md px-4 py-2 flex flex-wrap items-center gap-4" aria-label="Main">
<span class="font-bold me-auto">Xenoara Pro</span> <a href="#" class="link-body-emphasis no-underline small">Home</a> <a href="#" class="link-body-emphasis no-underline small">Shop</a> <a href="#" class="btn btn-sm btn-primary">Sign up</a>
</nav>18Upload drop area
A large area with shadow-sm and rounded-4, waiting for files.
Drop files here
PNG, JPG or PDF up to 33 MB
<div class="bg-page rounded-xl shadow-sm p-6 text-center border">
<div class="text-3xl text-primary-ink">
<i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i>
</div>
<div class="font-semibold">
Drop files here
</div>
<div class="small text-muted">
PNG, JPG or PDF up to 33 MB
</div>
</div>19Shadow on dark
Shadows are stronger on light surfaces; on dark ones add a border-opacity border for definition.
shadow-lg + border-opacity-10
shadow only
<div class="bg-dark rounded-xl p-6 flex flex-wrap gap-4">
<div class="bg-dark text-white rounded-lg shadow-xl p-4 border border-white/10 small">
shadow-lg + border-opacity-10
</div>
<div class="bg-dark text-white rounded-lg shadow-md p-4 small">
shadow only
</div>
</div>20Testimonial card
A quote card with shadow and a large quote icon.
Friendly people answer your questions quickly, by phone, chat or email.
<figure class="bg-page rounded-xl shadow-md p-6 mb-0" style="max-width:28rem">
<div class="text-3xl text-primary-ink leading-none">
<i class="bi bi-quote" aria-hidden="true"></i>
</div>
<blockquote class="mb-4"><p class="mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p></blockquote>
<figcaption class="small text-muted">Chloe Rossi, Austin</figcaption>
</figure>