---
title: "How to Add Gradient Background in Elementor?"
url: https://theplusaddons.com/docs/add-gradient-background-in-elementor/
date: 2025-01-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-Gradient-Background-in-Elementor_-1024x536.jpg
word_count: 362
---

# How to Add Gradient Background in Elementor?

## 

- The Plus Addons for Elementor Row Background widget adds a linear or radial gradient to the container it is placed in, and it fills the whole container behind its widgets.
- Row Background is only available in The Plus Addons for Elementor Pro, and it is switched on under The Plus Addons > Widgets before it is dropped inside a container or classic section.
- Gradient Color uses exactly two colours, with Color 1 and Color 2 locations in %, while Linear uses Gradient Angle and Radial uses Position.

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](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/section-background/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

![Color 1 and Color 2 settings of a Gradient Color deep layer with the gradient on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-gradient-colors.webp)

- Choose **Gradient Style**: **Linear** uses **Gradient Angle**, **Radial** uses **Position** (where the gradient starts).

![The Gradient Style dropdown and Gradient Angle slider for a linear gradient](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-gradient-style.webp)

![Setting up a gradient background in the Row Background widget](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-gradient.gif)

## 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.

![Published container with a blue-to-red linear gradient background](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-result-gradient.webp)

## 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**.

## Related Docs

- [Row Background widget: settings overview](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/)- [Add an animated gradient background](https://theplusaddons.com/docs/add-an-animated-gradient-background-in-elementor/)- [Create a background overlay](https://theplusaddons.com/docs/create-an-elementor-background-overlay/)

## Frequently Asked Questions

**Q: What do I need before adding a gradient background in Elementor?**
A: The Row Background widget is only available in The Plus Addons for Elementor Pro, so the Pro edition has to be installed and activated first. The widget also needs to be switched on under The Plus Addons > Widgets, then placed inside the container or classic section that should receive the background. It does not draw anything by itself, so the container is what actually shows the gradient.

**Q: How do I add a gradient background to a section or container in Elementor?**
A: The gradient is set through the Row Background widget inside Content > Deep Layer. Set Select Option to Gradient Color, then choose Color 1 and Color 2 and adjust their locations to control where each colour stops. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this inside the Elementor editor without code, which keeps the background tied to the container instead of floating as a separate element.

**Q: Should I use Linear or Radial gradient for my background?**
A: Linear works best when you want a directional blend across the container, while Radial starts from a point and spreads outward. The page says Linear uses Gradient Angle, and Radial uses Position instead. That matters because angle changes only affect Linear gradients, while Radial gradients are controlled by where the blend begins.

**Q: Why is changing Gradient Angle not doing anything?**
A: Gradient Angle only applies to Linear gradients. If Gradient Style is set to Radial, the angle setting has no effect because Radial uses Position as its control point instead. That is the usual reason people think the setting is broken when it is really just the wrong gradient style for that control.

**Q: Can I make a gradient with more than two colours?**
A: The Row Background widget uses exactly two colours for its gradient: Color 1 and Color 2. If you want a moving gradient with more colours, the page points to Gradient Animate Color instead. That split matters because static two-colour gradients and animated multi-colour gradients are handled as different effects in The Plus Addons for Elementor.

**Q: How does the top layer affect a gradient background?**
A: The Top Layer has its own Gradient Color option with the same settings as the main layer, but it is drawn above the other layers. That means opaque top-layer colours can hide what sits underneath. If you want lower layers to show through, use transparency in the top layer rather than solid colours.