How to Create Multi-Color Gradient Background in Elementor (More Than Two Colors)

Updated: October 11, 2022

By using Elementor as your page builder you can customize any background of the section in your website by giving it a solid color, gradient color, video, or a slideshow. By default, for gradient background in Elementor, you can use up to two colors only, however, we will give you a way to add more colors to the gradient background.

If you only want to add a two-color gradient into any background of the sections, firstly, you need to create a section and use any block structure you want. After creating one — or if you already have the section that you want to change the color of its background — click the Section Handle to open the settings panel.

On the Edit Section Menu, go-to Style Tab and click on the Gradient Button , it will show the gradient option to choose the color of your liking, and select the first color and second color.

After giving the section background gradient color, you can also change the type of gradient from linear to radial and change the gradient color angle. You can also give it some effects like scrolling effects and mouse effects.

How to Create More Than Two Multi-Color Gradient Background

To create a gradient background that consists of more than two colors, you need to use Elementor Pro as the custom CSS feature is only available on the pro version. So, make sure to upgrade to the pro version if you haven’t done so.

Step 1: Clear First and Second Colors

Firstly, we need to clear the colors from the first and second colors in the Gradient option. Then click the Color option and click the Clear button to clear the color.

Do the above step for the second color as well.

Step 2: Go to Custom CSS Block to Insert Some Code

After the colors are cleared, go to the Advanced tab and click Custom CSS block.

In this step, we will type some codes that allow us to customize the gradient color.

Type or copy the following codes into the available box.

The code:

selector{background-image: 
  linear-gradient(red,blue,green,yellow); 
}

And you will get gradient colored background with four colors in it.

You also can give further customization for the gradient color, such as gradient direction or angle of the gradient by giving more codes to the code above.

selector{background-image: 
  linear-gradient(to top right,red,blue,green,yellow); 
}

The code above makes the color direction go to the top right of the background.

selector{background-image: 
  linear-gradient(150deg,red,blue,green,yellow); 
}

And that code for the angle of gradient color, you can try to change the direction or the angle as you wish.

Bonus

We have created some multi-color gradient backgrounds for Elementor and put them together into a page template. The page consists of 18 sections whereby on each section you will find a three-color gradient background. Simply click the button below to download the template.

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.