---
title: "How to Add Gradient Background in Elementor?"
url: https://theplusaddons.com/docs/add-gradient-background-in-elementor/
date: 2025-01-10
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Are you looking to add a gradient background in Elementor? A gradient background adds depth and visual interest to a website, making it more appealing to visitors. With the Row..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-Gradient-Background-in-Elementor_-1024x536.jpg
word_count: 240
---

# How to Add Gradient Background in Elementor?

## 

- Utilizes the Row Background widget from The Plus Addons for Elementor to add gradient backgrounds.
- Selects Gradient from the Select Option dropdown under the Deep Layer tab for customization.
- Sets colors and locations for the gradient using Color 1 and Color 2 sections, with options for linear or gradient styles.

Are you looking to add a gradient background in Elementor? A gradient background adds depth and visual interest to a website, making it more appealing to visitors.

With the Row Background widget from The Plus Addons for Elementor, you can easily add a gradient to a container or section in Elementor.

*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, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/row-background/)

To do this, add the Row Background widget to the container you want to add the gradient background and follow the steps -

1. Select **Gradient** from the **Select Option** dropdown, under the **Deep Layer** tab.

![](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-gradient.gif)

2. In the **Color 1** section, you have to set the first color of the gradient.

Then from the **Color 1 Location** slider, you can set the first color location. 

3. In the **Color 2** section, you have to set the second color of the gradient.

From the **Color 2 Location** slider, you can set the second color location.

Then from the **Gradient Style** dropdown, you can set the gradient style to linear or gradient.

> *Note: You can do the same by selecting the Gradient option from the Top Layer tab.*

For creating a simple gradient background you don’t need to add any background in the other layers.