Shadows

The Core styles contain a subtle drop shadow that can be applied to all block elements.

Usage

You can apply a shadow to your content boxes by adding the shadow class. If you want to reset an existing box shadow, you can use the shadow-none class.

Box with shadow
<div class="border padding shadow">
  Box with drop shadow
</div>
<div class="border padding shadow">
  Box with drop shadow
</div>
Box with drop shadow
Shadow reset
<div style="
  -webkit-box-shadow: 0 5px 2px -3px #c4c4c4;
  -moz-box-shadow: 0 5px 2px -3px #c4c4c4;
  box-shadow: 0 5px 2px -3px #c4c4c4;" class="border padding shadow-none">
  Let there be light. Or rather less shadow.
</div>
<div style="
  -webkit-box-shadow: 0 5px 2px -3px #c4c4c4;
  -moz-box-shadow: 0 5px 2px -3px #c4c4c4;
  box-shadow: 0 5px 2px -3px #c4c4c4;" class="border padding shadow-none">
  Let there be light. Or rather less shadow.
</div>
Let there be light. Or rather less shadow.