Bootstrap 5 Shadows
Shadows
Add or remove shadows to elements with box-shadow utilities.
🤖 Looking for the LLM-optimized version?View llm.md
On this page
Examples
While shadows on components are disabled by default in CoreUI for Bootstrap and can be enabled via$enable-shadows, you can also quickly add or remove a shadow with ourbox-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
html
<divclass="shadow-none p-3 mb-5 bg-light rounded">No shadow</div><divclass="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div><divclass="shadow p-3 mb-5 bg-body rounded">Regular shadow</div><divclass="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>Sass
Variables
scss/_variables.scss
$box-shadow:0.5rem1remrgba($black,.15);$box-shadow-sm:0.125rem.25remrgba($black,.075);$box-shadow-lg:01rem3remrgba($black,.175);$box-shadow-inset:inset01px2pxrgba($black,.075);Utilities API
Shadow utilities are declared in our utilities API inscss/_utilities.scss.Learn how to use the utilities API.
scss/_utilities.scss
"shadow":(property:box-shadow,class:shadow,values:(null:var(--#{$prefix}box-shadow),sm:var(--#{$prefix}box-shadow-sm),lg:var(--#{$prefix}box-shadow-lg),none:none,)),