Skip to contentSkip to footer
A foggy view of mountains, creating a calm, muted landscape.

Photo: Alex Shutin

Gradient

Introduction

Natura11y gradient masks fade media and visual layers into the surrounding surface.

Directional Gradients

Use .gradient-mask-{x} to fade a visual layer toward a specific edge. Replace x with top, right, bottom, or left to set the mask direction.

Landscape with hoodoos under a starry sky with gradient veneer effect

.gradient-mask-top

HTML
      <!-- Directional Gradients -->
      <div class="gradient-mask-top">...</div>
      <div class="gradient-mask-right">...</div>
      <div class="gradient-mask-bottom">...</div>
      <div class="gradient-mask-left">...</div>


      <!-- With breakpoint modifier -->
      <div class="gradient-mask-top--lg">...</div>
Figure 1

Gradient masks let the underlying theme color blend through the image.

Gradient veneer effect with primary theme

.theme-primary

HTML
      <div class="backdrop theme-primary">


          <div class="backdrop__media">
              <img
                  class="gradient-mask-bottom"
                  src="./path/to/image.jpg" alt="Placeholder"
              />
          </div>


          <div class="backdrop__cover">
              <!-- ... -->
          </div>


      </div>
Figure 2

Vignette Gradients

Use .gradient-mask-vignette to fade the outside edges of a visual layer.

Snow-covered mountain peak with rugged rock faces, softly illuminated by warm light against a dark blue sky
HTML
      <!-- Vignette Gradient -->
      <div class="gradient-mask-vignette">...</div>


      <!-- With breakpoint modifier -->
      <div class="gradient-mask-vignette--lg">...</div>
Figure 3

Backdrop

Color