A gradient background blends two colours across a section and looks less flat than a single colour.
The Row Background widget from The Plus Addons for Elementor adds a linear or radial gradient to the container it is placed in.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Row Background widget is only available in The Plus Addons for Elementor Pro.
- Widget to enable: Row Background, switched on under The Plus Addons > Widgets.
- Where to put it: drop the widget inside the container (or classic section) that should get the background. It draws nothing of its own; the background fills that container.
Steps
- Add the Row Background widget to the container and open Content > Deep Layer.
- Set Select Option to Gradient Color.
- Pick Color 1 and Color 2, and move Color 1 Location and Color 2 Location to set where each colour stops.
- Choose Gradient Style: Linear uses Gradient Angle, Radial uses Position (where the gradient starts).
Settings
| Setting | What it does | Default |
|---|---|---|
| Color 1 / Color 2 | The two gradient colours. | orange / cyan |
| Color 1 Location / Color 2 Location | Where each colour stops, in %. | – |
| Gradient Style | Linear or Radial. | Linear |
| Gradient Angle | Direction of a linear gradient. | 180deg |
| Position | Starting point of a radial gradient. | Centre |
How It Behaves
- The gradient fills the whole container behind its widgets. In our test, a linear gradient at 90deg ran from Color 1 on the left to Color 2 on the right.
- A radial gradient with the top-left position started in the top-left corner.
- The Top Layer has its own Gradient Color option with the same settings. It is drawn above the other layers, so use colours with transparency there if you want the layers below to show.
Limitations
- The gradient uses exactly two colours. For a moving gradient with more colours, use Gradient Animate Color.
Troubleshooting
Changing Gradient Angle does nothing
The angle only applies to Linear. For Radial, use Position.
