Design With Radial GradientsDesign With Radial Gradients

We’ve just redesigned our color picker, now with four different fill options to choose from.

June 25, 2019

Just a few weeks ago, we introduced shared colors, which allowed you to add and update new colors across your projects and private Team Store. Like many of our recent releases, we’ve been focused on features that help you stay creative, while keeping your entire style guide in sync. Now we’re taking the next step in color management by introducing an easy way to create and set radial gradients.

Fill Types

As part of this release, we’ve refreshed our color picker with beautiful icons for easy toggling between fill types. Open Framer X today and you’ll find four different options to choose from: Solid Color, Linear Gradient, Radial Gradient and Image Fill. The color presets have also been updated. You can either create your own radial gradient or choose from a selection of pre-built options and simply adjust to suit your design.

Canvas Controls

Applying a radial gradient is simple. All you have to do is select a frame or graphic element and click on the third icon in the top right of the color picker. Then adjust the gradient visually by dragging the circular color stops on the canvas. Move the central one to adjust the gradient’s placement, the right one to change the radius, and the top handle to change the gradient’s proportions. Hold Shift while dragging the right color stop to adjust the gradient’s radius without changing its proportions.

Feel free to reach out to us on Twitter or join our Community if you have any questions or feedback. Interested in learning more? Read up on styling properties in Framer X or learn what’s new in the tool by checking out our recent updates.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.