Skip to content
Sites

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.

3 min read713 words7 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Gradients & Background Blur
  2. Where You Can Apply These Backgrounds
  3. How to Add a Background Gradient
  4. How to Add a Background Blur
  5. Frequently Asked Questions
  6. Related Articles

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?

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) What this shows Navigate to Sites > Funnels / Websites. What this shows Illustrates the "Step 1: Navigate to Page Builder" section of "Gradients and Background Blur in the Page Builder". 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 > FunnelsImage 1 of 7 Where to goNavigate to Sites > Funnels / Websites. Open the Funnel/Website then select the page that you would like to edit.
Buttons and menus referenced SitesFunnels / Websites
Next stepClick 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.
All 2 steps in this 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) What this shows Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. What this shows Illustrates the "Step 2: Go to Color Settings" section of "Gradients and Background Blur in the Page Builder". 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). Image 2 of 7 Where to goClick 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.
Buttons and menus referenced BackgroundColor
Next stepUnder Color, turn on the Gradient toggle Use the Type dropdown to select your gradient type (Linear, Angular, Radial)
All 2 steps in this 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) What this shows Under Color, turn on the Gradient toggle Use the Type dropdown to select your gradient type (Linear, Angular, Radial) What this shows Illustrates the "Step 3: Enable and Select Gradient" section of "Gradients and Background Blur in the Page Builder". 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…. Image 3 of 7 What to fill inUnder Color, turn on the Gradient toggle Use the Type dropdown to select your gradient type (Linear, Angular, Radial)
Fields in this part of the guide Under Color, turn on the Gradient toggle
Buttons and menus referenced Gradient toggleType
Next stepSelect 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)
All 2 steps in this 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) What this shows Select colors for your gradient by clicking + Add Color or by clicking directly on the gradient slider Adjust colors using the color… What this shows Illustrates the "Step 4: Set Up Gradient" section of "Gradients and Background Blur in the Page Builder". 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! Image 4 of 7 What to chooseSelect 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 in this part of the guide Adjust colors using the color selectorCustomize the gradient using the gradient slider
Buttons and menus referenced + Add ColorAngle
Next stepFollow these steps to soften your background using a blue. This works great with semi-transparent colors!
All 4 steps in this 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) What this shows Navigate to Sites > Funnels / Websites. What this shows Illustrates the "Step 1: Navigate to the Page Builder" section of "Gradients and Background Blur in the Page Builder". 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 > FunnelsImage 5 of 7 Where to goNavigate to Sites > Funnels / Websites. Open the Funnel/Website then select the page that you would like to edit.
Buttons and menus referenced SitesFunnels / Websites
Next stepClick 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
All 2 steps in this 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) What this shows Click on the Section/Row/Column then scroll to the Background in the right-hand sidebar. What this shows Illustrates the "Step 2: Enable Background Blur" section of "Gradients and Background Blur in the Page Builder". 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. Image 6 of 7 Where to goClick 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 in this part of the guide Under Color, turn on the Background Blur toggle
Buttons and menus referenced BackgroundColorBackground Blur toggle
Next stepUsing the Blur Intensity Slider to set the desired level of blur.
All 3 steps in this 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) What this shows Using the Blur Intensity Slider to set the desired level of blur. What this shows Illustrates the "Step 3: Choose Blur" section of "Gradients and Background Blur in the Page Builder". 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. Image 7 of 7 What this coversUsing the Blur Intensity Slider to set the desired level of blur.
Buttons and menus referenced Blur Intensity Slider
Next stepQ: 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.

Was this guide helpful?

Related guides

How to Add a Two‑Step Order Form to a Funnel5 min read · 12 imagesTracking Scripts/Pixel Code1 min readSEO Meta Data1 min readClick-To-Call, Click-To-Text, and Click-To-Email Links & Buttons for Websites and Funnels3 min read · 5 images