There are two color types that you can use as a background of a section and column in Elementor: solid and gradient. Unlike Divi, the gradient background of Elementor supports only two colors. Even so, you can create a multi-color gradient (more than two) in Elementor via custom CSS.
In the previous article, we have covered how to create a multi-color gradient in Elementor. As the follow up of the article, we have created some gradient backgrounds that consists of 3 colors and put them together into a single page template which you can download for free. Simply click the following button to download.
How to Use the Template
The page template consists of 18 sections. On each section, you will find a linear gradient background that consists of 3 colors. Simply find a gradient you like and copy the section to your page.
If you want it, you can also use the gradient on a column. To do so, simply copy the CSS code of gradient you like and paste it to Custom CSS field of the column you want to add the gradient to.
CSS Codes
Gradient 1
CSS code:
selector{background-image:
linear-gradient(to left, #FEAC5E, #C779D0,#4bc0c8);
}
Gradient 2
CSS code:
selector{background-image:
linear-gradient(to left, #3f5efb, #af50a6,#fc466b);
}
Gradient 3
CSS code:
selector{background-image:
linear-gradient(to left, #4158D0, #C850C0,#FFCC70);
}
Gradient 4
CSS code:
selector{background-image:
linear-gradient(to left, #764dff, #239eb9,#d73e87);
}
Gradient 5
CSS code:
selector{background-image:
linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
}
Gradient 6
CSS code:
selector{background-image:
linear-gradient(to left, #FFCBA0, #DD5789,#9B5BE6);
}
Gradient 7
CSS code:
selector{background-image:
linear-gradient(to left, #12C2E9, #C471ED,#F64F59);
}
Gradient 8
CSS code:
selector{background-image:
linear-gradient(to left, #EB0000, #95008A,#3300FC);
}
Gradient 9
CSS code:
selector{background-image:
linear-gradient(to left, #A8EB12, #00BF72,#051937);
}
Gradient 10
CSS code:
selector{background-image:
linear-gradient(to left, #8A2387, #E94057,#F27121);
}
Gradient 11
CSS code:
selector{background-image:
linear-gradient(to left, #FEAC5E, #C779D0,#4bc0c8);
}
Gradient 12
CSS code:
selector{background-image:
linear-gradient(to left, #f4e784, #f24389,#a478f1);
}
Gradient 13
CSS code:
selector{background-image:
linear-gradient(to left, #68e3f9, #f55a9b,#4f4ed7);
}
Gradient 14
CSS code:
selector{background-image:
linear-gradient(to left, #fff1bf, #ec458d,#474ed7);
}
Gradient 15
CSS code:
selector{background-image:
linear-gradient(to left, #fcef64, #fcc44b,#f44c7d);
}
Gradient 16
CSS code:
selector{background-image:
linear-gradient(to left, #1cdce8, #bb77ed,#f34a62);
}
Gradient 17
CSS code:
selector{background-image:
linear-gradient(to left, #53dbf2, #ce9eec,#3a7ff2);
}
Gradient 18
CSS code:
selector{background-image:
linear-gradient(to left, #f7ea60, #3cf2de,#f774bb);
}
