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).
<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
<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.
<!-- 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.
<!-- 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.
<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.
<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.
<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.
<div class="shadow shadow-offset-down-md shadow-offset-left-sm">Shadow offset down left</div>