Adding Gradient Backgrounds and Blur Effects

Gradients blend colors for depth, and background blur softens what sits behind an element so text stands out. Both are available on sections, rows and columns in the page builder, and gradient styling also works on buttons in the form, survey and quiz builders.

Add a Gradient to a Container

1. Open the page and select a Section, Row or Column.
2. In the right sidebar, scroll to Background and open the Color tab.
3. Turn on the Gradient toggle and pick a Type: Linear, Radial or Angular.
4. Click + Add Color or click the slider to add stops. Up to 10 are allowed. Drag stops to reposition them.
5. For linear and angular types, use the Angle slider to set direction.

To remove a stop, click its X. To return to a solid color, turn the toggle off.

Add Background Blur

On the same Color tab, switch on Background Blur and set Blur Intensity. It works best with a semi-transparent color on top, giving a frosted-glass look. Text inside the element stays sharp, since only what is behind it is softened.

Gradient Buttons in Forms, Surveys and Quizzes

Select the button, open its style settings, and under Button Background choose Gradient instead of Solid Color. Choose the type, edit the color stops, adjust the angle if offered, then preview and save. Existing solid buttons are unchanged until you switch them.

Fixing Banding

If you see stripes, add a stop near the harsh transition, use colors closer in lightness, or nudge the angle.

Good to know: Choose gradients from your brand palette and check text contrast across the whole blend, not just at one end.