🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Background Gradients

A collection of customizable background gradients.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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

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

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us