Bootstrap Shadows
Add or remove shadows to elements with box-shadow utilities.
Examples
While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).
No shadow
Small shadow
Regular shadow
Larger shadow
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>Extended shadows
Torus Kit extends Bootstrap shadows with new variations of Box shadow and brings the new SVG drop shadow, that can be applied on any element, and unlike the box-shadow it maintains the element’s shape.
Box shadow
No shadow
Extra small shadow
Small shadow
Regular shadow
Large shadow
Extra large shadow
Pop shadow
Risen shadow
<div class="shadow-none">No shadow</div>
<div class="shadow-xs">Extra small shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-pop">Pop shadow</div>
<div class="shadow-risen">Risen shadow</div>SVG shadow
<div class="svg-shadow-xs">
<svg>...</svg>
</div>
<div class="svg-shadow-sm">
<svg>...</svg>
</div>
<div class="svg-shadow">
<svg>...</svg>
</div>
<div class="svg-shadow-lg">
<svg>...</svg>
</div>
<div class="svg-shadow-xl">
<svg>...</svg>
</div>
<div class="svg-shadow-pop">
<svg>...</svg>
</div>Shadow intensity
Need lighter or stronger shadow? Use .shadow-intensity-* class on any .shadow-* or .svg-shadow-* element.
Shadow intensity xs
Shadow intensity sm
Shadow intensity md
Shadow intensity lg
Shadow intensity xl
SVG Shadow intensity xs
SVG Shadow intensity sm
SVG Shadow intensity md
SVG Shadow intensity lg
SVG Shadow intensity xl
<!-- Box shadow -->
<div class="shadow shadow-intensity-xs">Shadow intensity xs</div>
<div class="shadow shadow-intensity-sm">Shadow intensity sm</div>
<div class="shadow shadow-intensity-md">Shadow intensity md</div>
<div class="shadow shadow-intensity-lg">Shadow intensity lg</div>
<div class="shadow shadow-intensity-xl">Shadow intensity xl</div>
<!-- SVG shadow -->
<div class="svg-shadow shadow-intensity-xs">SVG Shadow intensity xs</div>
<div class="svg-shadow shadow-intensity-sm">SVG Shadow intensity sm</div>
<div class="svg-shadow shadow-intensity-md">SVG Shadow intensity md</div>
<div class="svg-shadow shadow-intensity-lg">SVG Shadow intensity lg</div>
<div class="svg-shadow shadow-intensity-xl">SVG Shadow intensity xl</div>Shadow color (glow)
Add a color to the shadow using any one from the **theme colors by adding .shadow-<color> to the .shadow-* or .svg-shadow-* element. We’ve added .shadow-intensity-lg class to make the shadow color more visible.
Shadow primary
Shadow secondary
Shadow success
Shadow info
Shadow warning
Shadow danger
Shadow light
Shadow dark
Shadow gray
SVG Shadow primary
SVG Shadow secondary
SVG Shadow success
SVG Shadow info
SVG Shadow warning
SVG Shadow danger
SVG Shadow light
SVG Shadow dark
SVG Shadow gray
<!-- Box shadow -->
<div class="shadow shadow-primary shadow-intensity-lg">Shadow primary</div>
<div class="shadow shadow-secondary shadow-intensity-lg">Shadow secondary</div>
<div class="shadow shadow-success shadow-intensity-lg">Shadow success</div>
<div class="shadow shadow-info shadow-intensity-lg">Shadow info</div>
<div class="shadow shadow-warning shadow-intensity-lg">Shadow warning</div>
<div class="shadow shadow-danger shadow-intensity-lg">Shadow danger</div>
<div class="shadow shadow-light shadow-intensity-lg">Shadow light</div>
<div class="shadow shadow-dark shadow-intensity-lg">Shadow dark</div>
<div class="shadow shadow-gray shadow-intensity-lg">Shadow gray</div>
<!-- SVG shadow -->
<div class="svg-shadow shadow-primary shadow-intensity-lg">SVG Shadow primary</div>
<div class="svg-shadow shadow-secondary shadow-intensity-lg">SVG Shadow secondary</div>
<div class="svg-shadow shadow-success shadow-intensity-lg">SVG Shadow success</div>
<div class="svg-shadow shadow-info shadow-intensity-lg">SVG Shadow info</div>
<div class="svg-shadow shadow-warning shadow-intensity-lg">SVG Shadow warning</div>
<div class="svg-shadow shadow-danger shadow-intensity-lg">SVG Shadow danger</div>
<div class="svg-shadow shadow-light shadow-intensity-lg">SVG Shadow light</div>
<div class="svg-shadow shadow-dark shadow-intensity-lg">SVG Shadow dark</div>
<div class="svg-shadow shadow-gray shadow-intensity-lg">SVG Shadow gray</div>Inset shadows
Add .shadow-inset class to .shadow-* to create an inner shadow effect.
Extra small shadow
Small shadow
Regular shadow
Large shadow
Extra large shadow
Pop shadow
Risen shadow
<div class="shadow-xs shadow-inset">Extra small shadow</div>
<div class="shadow-sm shadow-inset">Small shadow</div>
<div class="shadow shadow-inset">Regular shadow</div>
<div class="shadow-lg shadow-inset">Large shadow</div>
<div class="shadow-xl shadow-inset">Extra large shadow</div>
<div class="shadow-pop shadow-inset">Pop shadow</div>
<div class="shadow-risen shadow-inset">Risen shadow</div>Shadow offset
Move the shadow out from its original position to make the element stand-out even more. Use in both down and left direction by adding .shadow-offset-<down|left>-<variant>.
Offset down
Add .shadow-offset-down-<variant> to .shadow-* or .svg-shadow-* element to move the shadow down.
Shadow offset down xs
Shadow offset down sm
Shadow offset down md
Shadow offset down lg
Shadow offset down xl
<div class="shadow shadow-offset-down-xs">Shadow offset down xs</div>
<div class="shadow shadow-offset-down-sm">Shadow offset down sm</div>
<div class="shadow shadow-offset-down-md">Shadow offset down md</div>
<div class="shadow shadow-offset-down-lg">Shadow offset down lg</div>
<div class="shadow shadow-offset-down-xl">Shadow offset down xl</div>Offset left
Add .shadow-offset-left-<variant> to .shadow-* or .svg-shadow-* element to move the shadow left.
Shadow offset left xs
Shadow offset left sm
Shadow offset left md
Shadow offset left lg
Shadow offset left xl
<div class="shadow shadow-offset-left-xs">Shadow offset left xs</div>
<div class="shadow shadow-offset-left-sm">Shadow offset left sm</div>
<div class="shadow shadow-offset-left-md">Shadow offset left md</div>
<div class="shadow shadow-offset-left-lg">Shadow offset left lg</div>
<div class="shadow shadow-offset-left-xl">Shadow offset left xl</div>Combination
You can even combine the shadow offsets to create your own.
Shadow offset down left
<div class="shadow shadow-offset-down-md shadow-offset-left-sm">Shadow offset down left</div>