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).
.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>
Gradient Masks allow the underlying background color blend through the image, enhancing the visual harmony between elements.
.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>
Vignette Gradients
Use the .gradient-mask-vignette utility class to add a vignette effect to an element (see Figure 3).
<!-- Vignette Gradient -->
<div class="gradient-mask-vignette">...</div>
<!-- With breakpoint modifier -->
<div class="gradient-mask-vignette">...</div>
