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

Updated: March 16, 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.

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

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general