Background Gradient

With Elementor, it's easy to add background gradient colors to any WordPress page or post and customize it visually.

Step 1: Add a section and place any widget inside it

The first step is to click on the 'Add section' button and add a section, no matter how many columns. Drag a widget inside, let's say the text widget.

Step 2: Open the Section settings

Click on the section. The left panel should now show the three Elementor tabs. Go to Style, and under Background choose the Gradient icon.

Step 3: Choose the first gradient colors

The first setting is called the color. This is the first color. You can choose the color with the color picker, or enter the hex code of the color.

Step 4: Play with the location of the first color of the gradient

Drag the scale up and down to change the spread of the first color.

Step 5: Second Color and location

Similar to steps 3 and 4, the two settings give you the same control over the color and location of the second gradient color.

Step 6: Choose linear or radial 

If you want the gradient to be from one side to the other, choose the linear type.
If you want it to be from the center outward - choose the radial type.

Step 7: Set the gradient angle

Rotate the direction of the gradient to set the exact angle that works for you.