You can now use a gradient or solid color in the builder. Gradients can be linear or radial, with 2 to 10 color stops, an adjustable angle, and per-color transparency. The gradient option lives in the same color picker control you already use, in the right sidebar of the selected element.
Why use gradients
Build gradient designs directly in the builder, with no image workarounds.
Create layered designs. For example, a gradient page background can be achieved with semi-transparent block or cell gradients.
Supported elements
| Element | Color control |
|---|---|
| Page background | Page settings > Page background > Background color |
| Page block (canvas and fluid grid) | Block style > Background color |
| Fluid-grid cell | Block style > Background color |
| Box and circle | Click element > Background color |
| Headline and paragraph | Click element > Text color (whole text only) |
Add a gradient to a page block
Click on the block on the canvas that needs to be edited.
On the left side, click on the Block style icon.
Click the Background color option in the right-side panel.
In the color picker, switch from Solid to Gradient.
Choose Linear or Radial.
Click a stop and pick a color, or type a hex or rgba() value. The canvas updates as you edit.
Click anywhere outside the picker to close it and keep your changes.
Fine-tune the gradient
Angle (linear only): Use the angle dial or type a value in degrees. Values outside 0–360 are converted automatically, so -45° becomes 315°.
Add a stop: Click anywhere on the stops bar. The new stop takes the color at that point.
Move a stop: Drag it along the bar, or type its position (%) in the stops list.
Remove a stop: Click X next to it in the stops list.
Transparency: Select a stop and use the transparency slider. You can also type an 8-digit hex value, where the last two digits set transparency: FF is opaque, 80 is about 50%, and 00 is fully transparent. For example, #FF000080 is red at about 50% transparency.
Radial options: Set Spread (or “how far the gradient extends from the center”) and Center X / Center Y (in %, relative to the element).
Recent gradients: Gradients you used recently appear as swatches in the Gradient tab. Click one to reuse it on the pages in the same workspace where they were created.
Accepted color formats: hex (3, 6 or 8 digits) and rgba().
Add a gradient to other elements
Other supported elements use the same color picker and steps. Select the element and open its color control (see Supported elements above).
Box, circle, fluid-grid cell, page background: Background color
Headlines and paragraphs: Click on the text element, not just part of the text inside it, then open Text color. If only part of the text is selected, the Gradient tab is unavailable.
Switch back to a solid color
Open the color picker and click Solid.
The solid color starts from the first stop of your gradient. If you switch back to Gradient before you close the picker, your gradient is restored. Once you close the picker with Solid selected, the gradient is removed.
Limitations
Text: Gradients apply to the whole headline or paragraph. You can’t apply a gradient to part of the text.
Number of stops: A gradient needs at least 2 stops and can have up to 10. When you reach 10, the picker shows “Maximum 10 stops.”
Unsupported controls: Gradients aren’t available for border color, page column color (Page settings).
Workspace colors: Workspace colors from Global assets work as solid colors only. You can’t save a gradient as a workspace color.
Tips
Layering: A fluid-grid cell sits on top of its block. If a block gradient doesn’t show, the cell background may be covering it. Make the cell background transparent, or set the gradient on the cell instead.
Page background: It shows only where blocks and cells are transparent or semi-transparent. Use stop transparency to let it show through.
Duplicating: When you duplicate an element, its gradient is copied too.
FAQ
Why doesn’t my block gradient show?
A fluid-grid cell background is probably covering it. See Layering under Tips.
Why is the Gradient tab unavailable for my text?
Only part of the text is selected. Select the whole headline or paragraph element instead.
I closed the picker and lost my changes. Why?
Pressing Esc discards changes. Click outside the picker to keep them.
Can I apply a gradient to just one word in a headline?
No. Text gradients apply to the whole text element.
Will my gradient look the same on the published page?
Yes. Gradients look the same in the editor, in Preview, and on the published page.
What happens if a block has both a background image and a gradient?
The image will be displayed, and the gradient will not be visible.