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
You can use the following tools to create CSS gradients online.
- Codioful
- CSS Gradient
- Coolors
- Angry Tools
- ColorGradient
- Colorffy
You can also read this post to learn more about the above tools.
