# Gradients and Background Blur in the Page Builder > Create multi-color gradients, use linear/radial/angular styles, and add background blur in GHL Customer Care’s Page Builder. - Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/gradients-and-background-blur-in-the-page-builder - Section: Sites / Funnels and Websites - Reading time: 3 min - Images: 7, each explained below --- Create modern, eye-catching pages with multi-color gradients and background blur in the GHL Customer Care Page Builder. This article shows how to design linear, radial, and angular gradients, fine-tune color stops, and add blur to achieve depth or glassmorphism. --- **TABLE OF CONTENTS** - [What are Gradients and Background Blurs?](#what-are-gradients-and-background-blurs) - [Key Benefits of Gradients & Background Blur](#key-benefits-of-gradients-and-background-blur) - [Where You Can Apply These Backgrounds](#where-you-can-apply-these-backgrounds) - [How to Add a Background Gradient](#how-to-add-a-background-gradient) - [How to Add a Background Blur](#how-to-add-a-background-blur) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **What are Gradients and Background Blurs?** Gradients let you blend two or more colors smoothly to create visual depth, while background blur softens the content beneath an element to boost contrast and readability. Together, these tools reduce the need for external design apps and help you build polished layouts directly in GHL Customer Care. --- ## **Key Benefits of Gradients & Background Blur** - **Multi-Color Control**: Build gradients with up to 10 color stops for subtle or vibrant blends. - **Style Variety**: Choose Linear, Radial, or Angular gradient types to match your layout. - **Precision Editing**: Drag color stops on a visual slider and set angles for exact results. - **Instant Depth**: Toggle Background Blur and adjust intensity to create soft, professional “glass” effects. - **Clean Workflow**: Switch quickly between **Color**, **Image**, and **Video** background tabs to pick the best background source. --- ## **Where You Can Apply These Backgrounds** Backgrounds live at the container level. Use them at the **section**, **row**, or **column** level to control how effects cascade and how content sits above them. - Apply gradients or blur on **Sections** for full-width hero areas. - Use **Rows** to create banded backgrounds across multiple columns. - Apply blur or a subtle gradient on **Columns** to improve text readability for a specific content block. --- ## **How to Add a Background Gradient** Follow these steps to add a gradient to your background. You can even add multi-color gradients! #### **Step 1:** Navigate to Page Builder - Navigate to **Sites** > **Funnels / Websites**. - Open the Funnel/Website then select the page that you would like to edit. ![Step 1: Navigate to Page Builder (image 1 of 7)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155056498084/original/-07IWdrFPik9GukGL_KiJLSbEJ6TAKLP1A.png) **Step 1: Navigate to Page Builder (image 1 of 7)** This screenshot appears in the "Step 1: Navigate to Page Builder" section of "Gradients and Background Blur in the Page Builder". The text alongside this image reads: Navigate to Sites > Funnels / Websites. Open the Funnel/Website then select the page that you would like to edit. The navigation path used here is Sites > Funnels. Immediately after, the guide continues: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. - Path: Sites > Funnels - Where to go: Navigate to Sites > Funnels / Websites. Open the Funnel/Website then select the page that you would like to edit. - Controls: Sites, Funnels / Websites - Next: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. Full procedure: 1. Navigate to Sites > Funnels / Websites. 2. Open the Funnel/Website then select the page that you would like to edit. #### **Step 2:** Go to Color Settings - Click on the Section/Row/Column then scroll to the **Background** in the right-hand sidebar. - Under Background, select the **Color** tab to open color settings. ![Step 2: Go to Color Settings (image 2 of 7)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155056498653/original/bAJnWmBs6E8D_lgLXrKpN1wRM87zpYehng.jpeg) **Step 2: Go to Color Settings (image 2 of 7)** This screenshot appears in the "Step 2: Go to Color Settings" section of "Gradients and Background Blur in the Page Builder". The text alongside this image reads: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. Immediately after, the guide continues: Under Color, turn on the Gradient toggle Use the Type dropdown to select your gradient type (Linear, Angular, Radial). - Where to go: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. - Controls: Background, Color - Next: Under Color, turn on the Gradient toggle Use the Type dropdown to select your gradient type (Linear, Angular, Radial) Full procedure: 1. Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. 2. Under Background, select the Color tab to open color settings. #### **Step 3:** Enable and Select Gradient - Under Color, turn on the **Gradient toggle** - Use the **Type** dropdown to select your gradient type (Linear, Angular, Radial) ![Step 3: Enable and Select Gradient (image 3 of 7)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155056499246/original/Xq-MFEfqBA8V85Bx6gz8kkjTXsLkmqVvzw.png) **Step 3: Enable and Select Gradient (image 3 of 7)** This screenshot appears in the "Step 3: Enable and Select Gradient" section of "Gradients and Background Blur in the Page Builder". The text alongside this image reads: Under Color, turn on the Gradient toggle Use the Type dropdown to select your gradient type (Linear, Angular, Radial). This part of the guide covers 1 field, listed below. Immediately after, the guide continues: Select colors for your gradient by clicking + Add Color or by clicking directly on the gradient slider Adjust colors using the color selector Customize the gradient using the gradient slider Use the Angle slider to adjust the gradient…. - What to fill in: Under Color, turn on the Gradient toggle Use the Type dropdown to select your gradient type (Linear, Angular, Radial) - Fields: Under Color, turn on the Gradient toggle - Controls: Gradient toggle, Type - Next: Select colors for your gradient by clicking + Add Color or by clicking directly on the gradient slider Adjust colors using the color selector Customize the gradient using the gradient slider Use the Angle slider to adjust the gradient angle (only available for Linear and Angular gradient types) Full procedure: 1. Under Color, turn on the Gradient toggle 2. Use the Type dropdown to select your gradient type (Linear, Angular, Radial) #### **Step 4:** Set Up Gradient - Select colors for your gradient by clicking **\+ Add Color** or by clicking directly on the gradient slider - Adjust colors using the color selector - Customize the gradient using the gradient slider - Use the **Angle** slider to adjust the gradient angle (only available for Linear and Angular gradient types) ![Step 4: Set Up Gradient (image 4 of 7)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155056499858/original/fmC1mScg5JvNU21qHb882u3LH2ojLpZnAg.png) **Step 4: Set Up Gradient (image 4 of 7)** This screenshot appears in the "Step 4: Set Up Gradient" section of "Gradients and Background Blur in the Page Builder". The text alongside this image reads: Select colors for your gradient by clicking + Add Color or by clicking directly on the gradient slider Adjust colors using the color selector Customize the gradient using the gradient slider Use the Angle slider to adjust the gradient angle (only available for Linear and Angular gradient types). This part of the guide covers 2 fields, listed below. Immediately after, the guide continues: Follow these steps to soften your background using a blue. This works great with semi-transparent colors! - What to choose: Select colors for your gradient by clicking + Add Color or by clicking directly on the gradient slider Adjust colors using the color selector Customize the gradient using the gradient slider Use the Angle slider to adjust the gradient angle (only available for Linear and Angular gradient types) - Fields: Adjust colors using the color selector, Customize the gradient using the gradient slider - Controls: + Add Color, Angle - Next: Follow these steps to soften your background using a blue. This works great with semi-transparent colors! Full procedure: 1. Select colors for your gradient by clicking + Add Color or by clicking directly on the gradient slider 2. Adjust colors using the color selector 3. Customize the gradient using the gradient slider 4. Use the Angle slider to adjust the gradient angle (only available for Linear and Angular gradient types) --- ## **How to Add a Background Blur** Follow these steps to soften your background using a blue. This works great with semi-transparent colors! #### **Step 1:** Navigate to the Page Builder - Navigate to **Sites** > **Funnels / Websites**. - Open the Funnel/Website then select the page that you would like to edit. ![Step 1: Navigate to the Page Builder (image 5 of 7)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155056498086/original/EX09QUqagcwyJ2rtJfiF6lI38DMKtg0Mbg.png) **Step 1: Navigate to the Page Builder (image 5 of 7)** This screenshot appears in the "Step 1: Navigate to the Page Builder" section of "Gradients and Background Blur in the Page Builder". The text alongside this image reads: Navigate to Sites > Funnels / Websites. Open the Funnel/Website then select the page that you would like to edit. The navigation path used here is Sites > Funnels. Immediately after, the guide continues: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. Under Color, turn on the Background Blur toggle. - Path: Sites > Funnels - Where to go: Navigate to Sites > Funnels / Websites. Open the Funnel/Website then select the page that you would like to edit. - Controls: Sites, Funnels / Websites - Next: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. Under Color, turn on the Background Blur toggle Full procedure: 1. Navigate to Sites > Funnels / Websites. 2. Open the Funnel/Website then select the page that you would like to edit. #### **Step 2:** Enable Background Blur - Click on the Section/Row/Column then scroll to the **Background** in the right-hand sidebar. - Under Background, select the **Color** tab to open color settings. - Under Color, turn on the **Background Blur toggle** ![Step 2: Enable Background Blur (image 6 of 7)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155056502888/original/t8oLEAKTT74oTyXl5xbCmzfPlOZjJbP6_w.png) **Step 2: Enable Background Blur (image 6 of 7)** This screenshot appears in the "Step 2: Enable Background Blur" section of "Gradients and Background Blur in the Page Builder". The text alongside this image reads: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. Under Color, turn on the Background Blur toggle. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: Using the Blur Intensity Slider to set the desired level of blur. - Where to go: Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. Under Background, select the Color tab to open color settings. Under Color, turn on the Background Blur toggle - Fields: Under Color, turn on the Background Blur toggle - Controls: Background, Color, Background Blur toggle - Next: Using the Blur Intensity Slider to set the desired level of blur. Full procedure: 1. Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. 2. Under Background, select the Color tab to open color settings. 3. Under Color, turn on the Background Blur toggle #### **Step 3:** Choose Blur Using the **Blur Intensity Slider** to set the desired level of blur. ![Step 3: Choose Blur (image 7 of 7)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155056502931/original/A5lt_-_4gMvNOsiy0OJ879qMs7m4CL8qjg.png) **Step 3: Choose Blur (image 7 of 7)** This screenshot appears in the "Step 3: Choose Blur" section of "Gradients and Background Blur in the Page Builder". The text alongside this image reads: Using the Blur Intensity Slider to set the desired level of blur. Immediately after, the guide continues: Q: How many colors can I use in a gradient? Up to 10 color stops. - What this covers: Using the Blur Intensity Slider to set the desired level of blur. - Controls: Blur Intensity Slider - Next: Q: How many colors can I use in a gradient? Up to 10 color stops. --- ## **Frequently Asked Questions** **Q: How many colors can I use in a gradient?** Up to 10 color stops. **Q: Will existing background images and videos change?** No. Previous settings remain as they are; gradients and blur are additional options. **Q: Does blur affect content inside the element?** Blur softens what’s behind the element. Content inside the element (like text) remains crisp. **Q: I’m seeing banding/stripes in my gradient. How can I fix it?** Try one or more of these: add an extra intermediate stop near the harsh transition, choose colors closer in lightness and slightly adjust the Angle slider. **Q: How do I remove a color stop or revert to a solid color?** Click the X next to a stop to delete it. To go back to a solid color, toggle Gradient off and pick a single color on the Color tab. --- ## **Related Articles** - [Sites Overview](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/websites-overview) - [Video Background](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/video-background) - [Advanced Image Settings for Mobile & Desktop View](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/advanced-image-settings-for-mobile-desktop-view) - [Animation Customizations in Funnels & Websites](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/animation-customizations-in-funnels-websites) - [Image Slider Element for Engaging Web Design](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/image-slider-element-for-engaging-web-design) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com