Skip to contentSkip to footer
Green and white leaf plant

Photo: Sergei A

Shadow

Introduction

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

HTML
      <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.

HTML
      <!-- With breakpoint modifier -->


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

Drop Shadow Utilities

Drop shadow utilities use the CSS filter: drop-shadow() function. Unlike box shadows, drop shadows follow the shape of the element, making them ideal for transparent images, SVGs, and cutout shapes.

Drop shadow utilities come in three sizes: 1 for small, 2 for medium, and 3 for large.

.drop-shadow-1

.drop-shadow-2

.drop-shadow-3

HTML
      <div class="drop-shadow-1">...</div>
      <div class="drop-shadow-2">...</div>
      <div class="drop-shadow-3">...</div>
Figure 3

Breakpoint Modifiers

Drop shadow utilities accept breakpoint modifiers.

HTML
      <!-- With breakpoint modifier -->


      <div class="drop-shadow-1--lg">...</div>
Figure 4

Text Shadow Utility

Add a soft and elegant text shadow to your typography with Natura11y’s text shadow utility.

Sample Text with Shadow
HTML
      <span class="text-shadow">Your text here</span>
Figure 5

Breakpoint Modifiers

Text shadow utility also accepts breakpoint modifiers.

HTML
      <!-- With breakpoint modifier -->


      <span class="text-shadow--lg">Your text here</span>
Figure 6

Color