Improvement: Radial Gradients Are Here

Hi there,

Gradients just got a new shape. Next to linear gradients, you can now create radial gradients: colors that blend outward from a center point, in a circle.

A gradient that draws the eye

A radial gradient is the easiest way to put the focus on one area of your design: a soft glow behind a product, a spotlight on a headline, or a vignette around a photo.

Pick Radial in the gradient type dropdown, place the center where you want the light to start, and adjust the size to make the spot tight or wide and soft. Then add your colors exactly like with a linear gradient, with up to 8 color stops.

A smoother gradient picker

The gradient picker also gets a refresh, in the Design Builder and in Quick Generation:

• Switch between Linear and Radial in one click, without losing your colors
• Reverse your gradient with a dedicated button
• Click directly on the gradient bar to add a color, or type its position in %

Where you can use it

Radial gradients work everywhere linear gradients do: format backgrounds, shapes, buttons, and text and button labels. On print designs, they're available on shape and button backgrounds.

They also carry through to every generation, whether from the spreadsheet, Quick Generation or the API, and are already supported in the Node.js and Python SDKs.

Also fixed

We took the opportunity to fix a few gradient issues: buttons with a border no longer show an oversized gradient, gradient angles now stay accurate in HTML5 exports, and transparent gradient backgrounds keep their transparency on export.