Gradient

Gradient is a gradual blending from one color to another color. There can be 2 or more colors. You can use gradient for shapes or background and also create animated gradients.

To create a gradient, select a shape or a background, and go to the Style panel. Click on the Fill property and go from a Solid color to a Linear. A Linear gradient is a gradient between two or more colors along a straight line. This is the most common type of gradient. You can choose each of the colors by clicking on each color stop. You can choose where you want your gradient to begin and end by adjusting the color stop.Below you’ll find the transparency value.

Click anywhere on the slider to add a new color stop. If you want to delete a stop, double-click on it.

You can also rotate the angle. You can save your gradient as a style to re-use it after.

The radial gradient radiates from a defined center to its outer shape through a series of color stops

You can animate gradient really easily using states. Let’s create an animated gradient background here.

In the first state, let’s create a first gradient. Create a linked state. In this second state, let s change this gradient: change the color, the rotation. Here let’s simply switch the first and the last color stop. Now let’s add the action to define how to change state. Choose Display state to trigger automatically. Define a 4 second duration to make it quite slow and create it as well on the second state —. Impressive no?

I believe we’re gonna see crazy animated gradients in the next weeks!!