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