Gradient • Natura11y
Jump to main contentJump to website footer
A foggy view of mountains, creating a calm, muted landscape.

Photo by Alex Shutin

Gradient

Introduction

Natura11y gradient masks are subtle design elements that enhance the visual harmony between elements.

Directional Gradients

Use the .gradient-mask-{x} utility class to add a gradient mask in a specific direction. Replace x with top, right, bottom, or left to set the gradient direction (see Figure 1).

Landscape with hoodoos under a starry sky with gradient veneer effect

.gradient-mask-top


        <!-- 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 allow the underlying background color blend through the image, enhancing the visual harmony between elements.

Gradient veneer effect with primary theme

.gradient-mask-primary


        <div class="backdrop theme-primary">
        
            <div class="backdrop__media">
                <img
                    class="backdrop__media 👉 gradient-mask-bottom"
                    src="./path/to/image.jpg" alt="Placeholder"
                />
            </div>
            
            <div class="backdrop__cover">
                <!-- ... -->
            </div>
            
        </div>
Figure 2

Vignette Gradients

Use the .gradient-mask-vignette utility class to add a vignette effect to an element (see Figure 3).

Landscape with hoodoos under a starry sky with gradient veneer effect

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