Shadows • Natura11y Inclusive Framework

Apply a beautiful box shadow to any block-level element.

Box Shadow Utilities

Natura11y's box shadow utilities come in three sizes. Each size is represented by a number: 1 for small, 2 for medium, and 3 for large.

.box-shadow-1

.box-shadow-2

.box-shadow-3

<div class="box-shadow-1">...</div>
<div class="box-shadow-2">...</div>
<div class="box-shadow-3">...</div>

Figure 1

Breakpoint Modifiers

Box shadow utilities accept breakpoint modifiers.

<!-- With breakpoint modifier -->

<div class="box-shadow-1--lg">...</div>

Figure 2