More color stops
Framer’s gradients have a
end color, but no extra stops in between.
But you can place different layers next to each other and have the gradients flow into each other. The left layer in the prototype below contains three child layers that each have a gradient. (I made them overlap by just 1 point.)
As a comparison: the layer on the right has one single CSS gradient with the same four colors as stops:
# CSS gradient for Layer B layer_B.style = background: "linear-gradient(70deg, #7F00FF, #00EAFF, #FFF700, #FF007B)"
For a radial gradient, you’ll also have to use CSS
background styling. (There’s an example in one of the Text Layers prototypes.)
Repositioning the start and end points
Another reason for which you might want extra stops is to have the gradient not start at the edges of the layer. But you can emulate this by adding child layers to your layer, and only apply the gradient to one of them.
In the earlier examples I did this with the tall layer on the right. Only its
child_with_gradient contains a gradient, the other two children just have the
end colors as their
# Vertical layer with child layers # Top child: end color child_top.backgroundColor = ourGradient.end # Middle child: gradient child_with_gradient.gradient = ourGradient # Bottom child: start color child_bottom.backgroundColor = ourGradient.start