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


Progress value is 30%

Background Gradients

A collection of customizable background gradients.

Copy: View demo


All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only 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 CSS custom properties:

.bg-gradient-1 {
  --bg-gradient-stop-1: #0E131F;
  --bg-gradient-stop-2: #FF0035;
  --bg-gradient-stop-3: hsla(228, 26%, 30%, 0.5);

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