18 3-Color Gradient Backgrounds for Elementor

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 our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to start a profitable blog with WordPress? OF COURSE!

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Haven’t used Elementor Pro yet?
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.