More color stops

Framer’s gradients have a start and 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 start and end colors as their backgroundColor.

# 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