NotesChangelogAPIAbout

Gradient layer improvements

We try to ship quickly and iteratively, which often times means making the decision to not build features we want to. As we added layer support to our updated gradient component, we decided to forgo implementing drag and drop at this time to prioritize other work. We had a few options to enable how to move layers around. We decided to add a single 'add gradient' button and allowed each layer to be moved up or down in the stack one level at a time.

Painting courtesy of McGill's Library

When you start a painting, you generally work on the background first, adding more and more layers to build out the details in the foreground. In the above image it would be quite challenging to paint the whiskers first and then move onto the background.

We quickly discovered in testing that adding the new layer to the bottom of the stack didn't fit the natural mental model of how people construnct gradients. Our initial implementation lead to a workflow similar to reverse glass painting, where you start with all the fine details and paint the background last.

While capable of producing amazing results, it's also quite challenging.

Reverse glass painting

While we aren't releasing drag and drop yet, we wanted to make the iterative improvement of adding new gradients layers to the top of the stack by default. So we did that. It seems painfully obvious in hindsight. With this comes another small improvement. If the top layer doesn't have any transparency, all the layers below would be hidden. If you're adding additional layers, you likely want to blend colors together - not completely obscure them. So we've automatically bumped the alpha down to 40% for the second color in the top gradient. Hope this makes your gradient creation workflow a little smoother.

New
DelanuayVoronoiColor ScalesGradientsText ShadowsBox Shadows
ChangelogNotesAPI
© Copyright 2018-2020hello@components.ai@components_aiTermsPrivacy© Copyright 2018-2020