Multi-Colored Gradient

Multi-colored Gradient solves the limitation of Elementor and adds the ability to add any number of color layers to make a beautiful Gradient.

You can find the section for Multi-colored Gradient in the new Powerup tab.

Another issue with block-level Elementor settings (settings in the Advanced tab) is that they can be applied only to their wrapper containers and not their child. So, to tackle that, the plugin also introduces an option to rather apply a gradient to the child element rather than a container wrapper.

A quick intro to Multi-Colored Gradients:

Multi-colored gradients allow you to add and apply multiple layers of gradient colors to any Elementor widget/element. The layered gradients can be applied to sections as well.

Getting the most value out of Multi-Colored Gradients:

Here are the different ways you can use Multi-Colored Gradients to make your pages look stunning:

• Use gradients on buttons to make your call-to-action stand out
• Use them as section background colors
• Apply gradients to simple card-based elements such as icon box, testimonials, pricing tables, etc to make them look more appealing

Check out the different ways you can use Multi-Colored Gradients here.

Adding Multi-colored Gradients to Elementor Element:

1. Select the desired Element (Section/Column/Widget).
2. Navigate to the Multi-colored Gradient section in the Powerup tab.
3. Select if you want to apply the gradient on ‘Background‘ or ‘Text‘ from the ‘Apply Gradient On‘ dropdown.
4. Click on the Add Item button.
5. Choose the color and location.
6. Repeat steps 3 and 4 for as many gradient colors you want.
7. Choose the Gradient Type (Linear/Radial) and Angle/Position for the gradient.

To apply the Gradient to a text

Select ‘Text‘ from the ‘Apply Gradient On‘ dropdown to apply the layered gradient on the text element.

To apply the Gradient to a child element:

1. Turn on the switch for the option ‘Apply on Child Element?‘
2. A new input field will be visible that says Child Selector
3. In the input, write down the CSS Selector for the element you want to target.

Pro Tips:

• Do not go overboard with the color layers. Make sure the gradient looks realistic and appealing to the eye.
• Choose a smooth transition of gradient colors to make your layered gradient look natural.
• When using Multi-Colored Gradients on text, avoid applying it on large blocks of text as it affects readability.

Notes:

• Multi-Colored Gradients by default apply to the whole widget container. To wrap the gradients to the desired element, you’ll have to enable the child element option and then write the name of the child selector.
• You can add any number of gradient colors to the element/widget.
• There are two gradient type options: Linear and Radial.
• You can change the angle of the gradient.
• You can apply gradients to both background or text.