Skip to main content

Box Shadow

Set the box shadow for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

bs-o:none
box-shadow: none;
bs-o:xs
box-shadow: 0 1px 2px #0000000d;
bs-o:sm
box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
bs-o:md
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
bs-o:lg
box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
bs-o:xl
box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
bs-o:xxl
box-shadow: 0 25px 50px -12px #00000040;
bs-o:3xl
box-shadow: 0 35px 60px -15px #0000004d;

bs-i:none
box-shadow: none;
bs-i:xs
box-shadow: inset 0 1px 2px #0000000d;
bs-i:sm
box-shadow: inset 0 2px 4px #0000000f;
bs-i:md
box-shadow: inset 0 2px 4px #0000001a;
bs-i:lg
box-shadow: inset 0 4px 6px #0000001a;
bs-i:xl
box-shadow: inset 0 6px 10px #0000001f;
bs-i:xxl
box-shadow: inset 0 8px 16px #00000026;
bs-i:3xl
box-shadow: inset 0 12px 24px #00000033;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Outset

Inset

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

Outset

Inset