Illustrator gradient guide: linear, radial and freeform

An Illustrator gradient is set in the Gradient panel (Window › Gradient) and shaped on the artwork with the Gradient tool (G). Select an object, choose Linear, Radial or Freeform in the panel, then click stops under the slider to set colours. Linear and radial blends are the ones to use for logos, icons and anything headed for the web, because they stay small and sharp everywhere. Freeform is for soft, painterly colour, and the older Gradient Mesh is for photographic shading.

The Gradient panel, control by control

Everything starts with the object selected and the right target active: the panel shows a fill and a stroke square, and the gradient goes to whichever is in front. Clicking the gradient thumbnail applies the last gradient you used, which is handy when you are styling a set of shapes.

To save a gradient, drag the thumbnail from the panel into the Swatches panel. Saved gradients are how you keep a brand's blends identical from file to file; gradient stops covers how to choose positions that look even.

Linear and radial gradients

With the Gradient tool selected, a bar called the annotator appears across the object. Drag its round end to move the start, the square end to change length and angle, and the stops along it to set colours without opening the panel. If the annotator is hidden, View › Show Gradient Annotator brings it back. Hold Shift while dragging to keep the angle at 45 degree steps.

Gradients in Illustrator follow the shape, not the artboard. Select several objects and drag across all of them with the Gradient tool, though, and one gradient spans the whole group, which is how a row of letters or icons shares a single sweep of colour.

Freeform gradients

Freeform gradients drop the bar altogether. You place colour points anywhere inside a shape and Illustrator blends between them, which gives the soft, organic colour that a mesh gradient gives, with far less effort than the Mesh tool.

1. 1

   Switch the type

   Select the shape and click Freeform in the Gradient panel. Illustrator places a few starting points for you.

2. 2

   Choose Points or Lines

   Points mode places individual colour points. Lines mode lets you click a path of points, and colour flows along that line.

3. 3

   Set each colour

   Double click a point to choose its colour, or select it and pick a swatch.

4. 4

   Adjust the spread

   In Points mode, drag the dotted circle around a point, or change Spread in the panel, to decide how far its colour reaches.

5. 5

   Remove what you don't need

   Drag a point out of the shape or press Delete. Fewer, well placed points look calmer than many.

Gradients on strokes

Select the stroke square in the Gradient panel, apply a gradient, and three buttons appear. They change the result more than any colour choice.

Gradient text that stays editable

Live type can't always take a gradient on its character fill directly, and outlining the text to force it means you can never fix a typo. The reliable route is the Appearance panel: select the text object, choose Add New Fill from the panel menu, drag that new fill below the Characters entry if needed, and apply your gradient to it. The words stay editable, and the gradient spans the whole line. For logo work, gradient logos covers when a blend helps a mark and when a flat version is needed.

Exporting Illustrator gradients to SVG and print

When you export SVG, linear and radial gradients become native gradient elements, so they stay tiny and sharp at any size. Freeform and mesh gradients have no SVG equivalent, so expect them to be rasterised or approximated: check the file before handing it to a developer. SVG gradients explains the format.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="leaf" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#064e3b"/>
      <stop offset="0.55" stop-color="#10b981"/>
      <stop offset="1" stop-color="#d9f99d"/>
    </linearGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#leaf)"/>
</svg>

For print, gradients are where banding and colour shifts show first. Convert to the printer's colour mode early, avoid long blends between two very close tones, and ask for a proof. Printing gradients lists the checks.

Putting your artwork on a background

Illustrator is the right home for a logo. The background it sits on in posts, stories and slides is a different problem, because it has to be redrawn for every format. A Gradiently Mark is a finished background that renders at every size and keeps words legible, and claiming one means no other brand can export with it.