18 3-Color Gradient Backgrounds for Elementor

Updated: October 13, 2022

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); 
}

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.