Open the editor

Home/Help/Style/Fill and gradients

STYLE

Fill and gradients

A shape's fill can be one colour, a linear or radial gradient, or nothing. The colour window edits them all, and while it edits a gradient you can drag the gradient's ends on the canvas.

Do it in the editor: guided tour5 steps · about 3 minutes · opens a practice scene

Step by step

  1. Select the beam

    Click the beam of light under the lamp. The inspector shows its Fill & stroke section.

  2. Open the colour window

    In Fill & stroke, click the swatch beside Fill. The colour window opens beside it: a colour area, hue and opacity sliders, and Hex and R G B A fields.

  3. Make it a gradient

    Click Linear gradient in the window's top row (None, Solid, Linear, Radial). The fill now fades from its colour to clear, and a bar of stops appears: click a stop to change its colour, or click the bar to add one.

  4. Point it down

    While the window is open, the beam shows the gradient's two ends. Drag the hollow start to the top of the beam and the filled end to the bottom: the light now fades as it falls.

  5. Fade the fill alone

    Press Esc to close the window: all you changed in it is one undo step. Then type 70 in the Opacity row under Fill and press Enter. This opacity is the fill's own; the stroke has its own, and so does the whole layer, in Appearance.

Good to know. Fill and its Opacity each have their own . A gradient animates like a colour: its stops, angle, centre and radius blend, even from a solid colour. A CSS-only export animates only the stops' colours; the JavaScript export animates everything. A radial gradient shows a centre, a round handle for its size and direction, and a square one that makes it an ellipse.

Keys

IPick the fill colour from the screen (in browsers with an eyedropper)