Topline OS now includes gradient blur backgrounds in the Page Builder. Pick a preset or customize colors, angles, blur strength, and placement to create depth and focus behind your content.
Gradient blur background option available for sections in the Page Builder
Presets you can apply in one click
Custom controls for colors, angle or direction, blur intensity, size, and position
Improved rendering for smooth edges and better performance on mobile
Keep contrast high: test text over your background for readability
Use gradient blurs behind hero sections or CTAs to draw attention
Limit to one or two gradient blurs per page to avoid visual noise
Pair with subtle overlays (for example 10 to 20 percent) if text needs extra contrast
Step 1
Open a Sites > Funnels & Websites and go page in the Builder and select the section you want to style.
Step 2
In Section settings, open Background and choose Gradient Blur then Preview, Save or Publish.
Can I add gradient blur to rows or elements
It is designed for sections. Some themes may allow advanced styling on rows, but section-level is recommended.
Will this slow down my page
Performance is optimized. Keep layers minimal and test on mobile for best results.
Can I use my brand colors
Yes. Pick any colors and adjust opacity to fit your palette.
How do I keep text readable
Use high contrast colors, add a semi-transparent overlay, or place text within a solid container.
Does this work with video or image backgrounds
You can combine effects, but keep it simple. Layering too many backgrounds can be distracting.
