CSS Gradients in Adobe Edge Animate

Adobe Edge Animate 1.5 has added the ability to create css gradients, which is great. No longer do we need to rely on images for gradients, making it possible to create, edit and even animate them directly in Edge Animate. With the gradients not being image based can also help to reduce the file size too. So lets take a look how to create and edit gradients.

Making a gradient

First we need a shape to add the gradient to. I have used the Rectangle Tool to draw a rectangle to represent the area of the sky for this animation (shown in blue on the screenshot below). With the rectangle selected a gradient can be added by clicking on the Gradient button, indicated by the red circle, see below.

You may want to start by choosing your type of gradient, the options include nonelinear and  radial (all indicated in red below). Radial allows you to create both Ellipse and Circle based gradients – to access these options just click and hold down the Radial gradient button. I have clicked on the Linear gradient button which creates a default gradient of purple to white.

When a colour stop has been clicked on (indicated in red below) its colour can be changed in many ways such as adjusting the Hue (1), Lightness (2) and Alpha (3) sliders, clicking on a colour in the colour picker or typing in the colour values at the bottom of the panel also works.

Using these methods I have clicked on the top colour stop and changed its colour to blue. Then sent the rectangle to the back by choosing Modify Arrange Send to Back to complete my animation.

But what else can you do?

Working with colour stops

If you want to add more colours to your gradients, you will need more colour stops. To add more colour stops click to the left of your gradient, indicated with the red box shown below. Then all you need to do is change the colour. To delete a colour stop, click on it and drag it to the left or right. Moving the colour stops up or down will also affect the gradient too.

Gradient Swatches

Gradient swatches allow you to save your gradient so you can use it again. Once you have created a gradient, click on the Add gradient swatch button to save it (indicated in red below). To apply a saved gradient swatch to a drawn object, select a drawn object then click on the saved gradient swatch.

Saving a colour

Click on the colour stop that contains the colour you want to save, then click on the Add color swatch button (indicated in red below). You could then click on another colour stop and click on the saved colour to apply it.

Change angle and position

With a linear gradient you can change the angle of the gradient, or with a radial gradient you can change the position of the gradient. To do this just adjust measurements indicated by the red box below.

No gradient

If you decide that a gradient isn’t the right solution you can always remove it by clicking the none button (indicated in red below).

We have just explored the main features for creating gradients, but there are more so go and explore.

When is a gradient, not a gradient?

CSS gradients are still relatively new, and support will vary across web browsers. All modern, up to date browsers should support CSS gradients, but this feature isn’t supported by Internet Explorer 9 and I’m sure a few others. If gradients aren’t supported, the background colour (highlighted in red below) will be shown instead so ensure you have selected a good one.

Please don’t forget gradients can be animated too. Keep an eye on Adobe Edge Animate, there are many more tools coming your way soon in version 2.o!,