Box Shadows

Box shadows can be applied to an element stylistically as an addition or alternative to borders.

Examples and Code

Select exampleDefault

Open Full Example

<div class="p3 box-shadow--none">No Box Shadow</div>
<div class="p3 box-shadow--sm">Small Box Shadow</div>
<div class="p3 box-shadow--md">Medium Box Shadow</div>
<div class="p3 box-shadow--lg">Large Box Shadow</div>

Usage Guidance

• Avoid using box-shadows heavily in design