Framer – Medium | Framer Team

Create, customize, and animate gradients—all in Framer.

When it comes to design, color has the potential to make or break a product, and recent trends suggest gradients are experiencing a vibrant comeback. Subtle, flat or overlay, the two-tone effect is now driving modern interface design in a big way. In true Framer fashion, we’re launching our very own version of gradients—mix and match in Design, then add motion in Code. Welcome to the next dimension of color.

Create the gradients you know and love.

We’ve kept out linear gradients simple: an angle and a set of two colors. Most design tools allow anchoring of color stops in the corners, impacting the angle of the gradient when the layer is resized. Because we built Framer Gradients upon the CSS model, the linear gradients you create will be adaptive by nature in both Design and Code.

Canvas Controls

Setting your colors is as simple as clicking one of the color points on your canvas. To rotate your gradient, hover above the top color point or below the bottom color point. You can also hold the shift key to snap at 45-degree angles and easily flip or switch between horizontal, vertical, and diagonal linear gradients.

Color Presets

While we were implementing Gradients, we also took the time to update our Color Presets. You can now add, edit, delete, and rearrange both solid and gradient presets in your color palette. Get easy access to your favorite swatches, brand colors, or global color schemes, all in one feature.

Bring your gradients to life.

Defining gradients in Design is just the beginning. Once you’ve created your basic design, simply toggle over to Code to animate the colors or angles. In just five simple lines of code, you’ll be able to create synchronized movements and beautiful wave effects. It’s gradients, brought to life.

box.animate
    gradient:    
        start: "#0AF"
        end: "#05F"
        angle: 180

Access the full power of Framer Gradients in Code by customizing to dynamic and interactive effect. Rotate angles, change colors, and find the perfect transition between color models. Gradients are a fantastic way to add depth and make UI pop. Find out more about the full range of possibilities by reading our documentation.

Get Started

To get you started, here are a few simple prototypes that illustrate the possibilities of designing with gradients:

1. Planets
   Use states to switch between a sequence of gradients. Open in Framer.
2. To-dos
   Use gradients to dynamically update items. Open in Framer.
3. Messenger
   Use gradients to create a more playful feel. Open in Framer.
4. iOS Playlist
   Use gradients to blend images into your interface. Open in Framer.

To learn more about creating and customizing gradients in Framer, read our documentation. Gradients is the first in a series of additions to our recently launched Framer Design interface. In the coming months, we’ll continue to strive for feature parity with other graphics tools. We’d love to hear what you think is missing from your toolkit, so drop us a line on Twitter or Facebook.

Introducing Framer Gradients was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.