Gradients

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.

Gradient properties
`start`	The start color of the gradient. (Default: white)
`end`	The end color of the gradient. (Default: black)
`angle`	The gradient’s angle in degrees. (The default is `0`, which will place the start color at the bottom)

Just like Colors, gradients are also objects. So you can create a new Gradient:

# 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 gradient property:

# A layer with a gradient
layerA = new Layer
    size: 300
    gradient:
        start: "yellow"
        end: "orange"
        angle: 90