What Is Bootstrap 5 Shadow Utilities?
Bootstrap 5 shadow utilities are ready-made CSS classes that add or remove a box-shadow on any element: .shadow-sm for a subtle shadow, .shadow for a regular one, .shadow-lg for a larger, softer one, and .shadow-none to remove it. They add depth to cards, buttons, navbars and images directly in the HTML without custom CSS.
What Are Bootstrap 5 Shadow Utilities?
Shadows are a visual cue for depth: an element with a shadow appears to sit above the surface around it, which helps separate a card from the page background or shows that a dropdown floats over the content. Bootstrap 5 ships four shadow classes as part of its utility API. .shadow-none removes any shadow, which is handy for overriding a component that has one; .shadow-sm gives a tight, faint shadow suited to small elements and cards; .shadow gives a medium shadow for raised panels; and .shadow-lg gives a wide, diffuse shadow for modals, pop-outs and featured items. Like other Bootstrap utilities, they are single-purpose classes that you stack on an element, for example <div class="card border-0 shadow-sm">, and they are applied with !important so they override component styles.
How Bootstrap 5 Shadow Utilities Work
Each class sets the box-shadow property to a value from Bootstrap's Sass variables, which Bootstrap 5.3 also exposes as CSS custom properties. By default, $box-shadow-sm is 0 .125rem .25rem rgba(0, 0, 0, .075), $box-shadow is 0 .5rem 1rem rgba(0, 0, 0, .15) and $box-shadow-lg is 0 1rem 3rem rgba(0, 0, 0, .175); in the compiled CSS, .shadow becomes box-shadow: var(--bs-box-shadow) !important. The values are the horizontal offset, vertical offset, blur radius and colour, so each larger class moves the shadow further down and spreads it more softly, imitating an element lifted higher above the page. Because the values are CSS variables, you can override them for the whole site in plain CSS, for example by redefining --bs-box-shadow on :root, or change the Sass variables before compiling. The utilities are separate from the $enable-shadows Sass option, which is off by default and, when turned on, adds decorative shadows to components such as buttons and form controls. Shadow utilities are not responsive by default, so there is no .shadow-md-lg class; if you need one, enable responsive variants through the utilities API or use a media query. Bootstrap also has no hover variants, so a lift-on-hover effect needs a few lines of custom CSS with a transition on box-shadow.
Best Practices for Bootstrap 5 Shadow Utilities
Use shadows to communicate hierarchy, not as decoration on everything. A common pattern is .shadow-sm on resting cards, .shadow on hovered or selected items, and .shadow-lg only on elements that genuinely float above the page, such as a highlighted pricing plan or a modal. Pair a shadow with .border-0 on cards, because Bootstrap's default 1px card border plus a shadow can look heavy. Keep the direction consistent: all of Bootstrap's shadows fall straight down, so mixing them with custom shadows cast to the side makes the light source look inconsistent. Shadows are much less visible on dark backgrounds, including Bootstrap 5.3's dark colour mode, so check dark sections and consider a subtle border or a lighter surface colour instead. Do not rely on a shadow alone to show that something is interactive or focused; keyboard users need a visible focus ring, which Bootstrap provides separately. For hover effects, animate box-shadow or transform with a short transition, and respect users who prefer reduced motion with a prefers-reduced-motion media query. Finally, avoid large shadows on many elements in long lists or during animations, because big blur radii make the browser do more painting work, which can make scrolling feel less smooth on low-powered devices.
Bootstrap 5 Shadow Utilities and Canvas Builder
Canvas Builder generates Bootstrap 5 HTML on top of the Canvas template, so any shadow utilities in the output, such as .shadow-sm or .shadow-lg, can be changed or removed class by class in the exported code. You can also describe the look you want in your prompt, for example "flat cards without shadows" or "raised cards with soft shadows", and the free CSS Box Shadow Generator on canvasbuilder.co helps you design a custom shadow when the four built-in sizes are not enough.
Frequently asked questions
What shadow classes does Bootstrap 5 have?
Bootstrap 5 has four: .shadow-none (no shadow), .shadow-sm (small), .shadow (regular) and .shadow-lg (large). They can be added to any element, such as a card, image, button or navbar. There are no extra sizes by default, but you can add more through the Sass utilities API.
How do I add a shadow on hover in Bootstrap 5?
Bootstrap has no hover shadow utility, so add a small custom rule: a class that sets transition: box-shadow .2s ease and applies box-shadow: var(--bs-box-shadow-lg) on :hover. Using Bootstrap's own CSS variables keeps the hover shadow consistent with the utility classes.
How do I change the colour or size of Bootstrap shadows?
Override the Sass variables $box-shadow, $box-shadow-sm and $box-shadow-lg before compiling Bootstrap, or redefine the CSS variables --bs-box-shadow, --bs-box-shadow-sm and --bs-box-shadow-lg in your own stylesheet. For a one-off shadow, write a normal box-shadow rule in a custom class.
Why is my Bootstrap shadow not showing?
Check that the element has a background colour, since a shadow on a transparent element over a similar background is hard to see, and that a parent with overflow: hidden is not clipping it. Also look for a .shadow-none class or another !important rule on the same element that overrides it.