CSS Background Gradients

How to

The Background Gradients component is a collection of customizable (CSS) background gradients.

To display the background decoration, pick an effect and apply the corresponding class.

For example:

<div class="height-100vh bg-gradient-1">
  <!-- content -->
</div>

The gradient colors can be customized using SASS variables:

.bg-gradient-1 {
  $bg-gradient-stop-1: #e6e5f7;
  $bg-gradient-stop-2: #e15b97;
  $bg-gradient-stop-3: #841386;
}

Optionally, you can animate the background setting the data-bg-animate equal to "on":

<div class="height-100vh bg-gradient-1" data-bg-animate="on">
  <!-- content -->
</div>