Gradients and Background Blur in the Page Builder

Modified on: Tue, 21 Oct, 2025 at 2:48 PM

Create modern, eye-catching pages with multi-color gradients and background blur in the HighLevel 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?

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

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 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 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 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)

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 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 3: Choose Blur

Using the Blur Intensity Slider to set the desired level of blur.

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.