Framer’s gradients are based on CSS gradients (naturally) and are easy to define and animate.
Their implementation is kept quite simple. The gradients are always linear, and only have three properties, which are all animatable.
|The start color of the gradient. (Default: white)|
|The end color of the gradient. (Default: black)|
|The gradient’s angle in degrees. (The default is |
Just like Colors, gradients are also objects. So you can create a
# A gradient with random colors ourGradient = new Gradient # the start color is 50% opaque start: Utils.randomColor 0.5 end: Utils.randomColor() angle: 0
… and then use it on different layers.
# The transparent layer layer_without_fill.gradient = ourGradient # The layer with an orange “backgroundColor” layer_with_fill.gradient = ourGradient # Thin vertical layer long_layer_1.gradient = ourGradient # (adjusting the angle) long_layer_1.gradient.angle = 90
But of course you can also set one directly on a layer’s
# A layer with a gradient layerA = new Layer size: 300 gradient: start: "yellow" end: "orange" angle: 90