# Illustrator gradient guide: linear, radial and freeform [Canonical HTML page](https://gradiently.design/guide/illustrator-gradient) Illustrator's gradients live in one small panel, yet most people only ever use half of it. This is the whole panel, the freeform type, and what happens to your blends when you export. ## The short version - Illustrator has three gradient types in its Gradient panel: Linear, Radial and Freeform. - The Gradient panel opens from Window › Gradient, and the Gradient tool (G) lets you drag, rotate and edit a gradient directly on the artwork. - A gradient on a stroke can run within the stroke, along its path or across its width. - To put a gradient on live type and keep it editable, add a new fill in the Appearance panel and apply the gradient to that fill. - Linear and radial gradients export to SVG as native gradient elements, while freeform and mesh gradients have no SVG equivalent. 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. | Control | What it does | | --- | --- | | Type | Linear, Radial or Freeform | | Angle | Rotates a linear or radial gradient | | Aspect ratio | Squashes a radial gradient into an ellipse | | Reverse | Flips the order of the stops | | Colour stops | Click below the slider to add, drag off to remove | | Opacity and Location | Per stop transparency and exact position as a percentage | | Midpoint diamonds | Move where two neighbouring stops blend half and half | | Stroke options | Within, along or across a stroke | What each part of the Illustrator Gradient panel controls. Typing Location values is the way to make a family of gradients match. 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](https://gradiently.design/guide/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. - Linear, three stops: `linear-gradient(120deg, #064e3b 0%, #10b981 55%, #d9f99d 100%)` - Radial, aspect 100%: `radial-gradient(circle at 50% 50%, #fef3c7 0%, #f59e0b 45%, #78350f 100%)` - Radial, aspect squashed: `radial-gradient(ellipse 70% 40% at 50% 50%, #e0e7ff 0%, #6366f1 50%, #1e1b4b 100%)` A linear blend, a round radial and a radial with a lower aspect ratio, written in CSS so you can match them on a website. 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](https://gradiently.design/guide/mesh-gradients) gives, with far less effort than the Mesh tool. 1. **Switch the type** Select the shape and click Freeform in the Gradient panel. Illustrator places a few starting points for you. 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. **Set each colour** Double click a point to choose its colour, or select it and pick a swatch. 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. **Remove what you don't need** Drag a point out of the shape or press Delete. Fewer, well placed points look calmer than many. > **Freeform or Gradient Mesh** Use freeform for flat illustration and backgrounds. The Mesh tool (U) still gives the most control for realistic shading, but every mesh point is something you have to manage by hand. ## 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. | Stroke option | Result | Good for | | --- | --- | --- | | Within stroke | The gradient fills the stroke as if it were a shape | Thick outlines and frames | | Along stroke | Colour travels from the start of the path to its end | Lines, rings, progress arcs | | Across stroke | Colour runs from one edge of the stroke to the other | Tubes, neon style lines, ribbons | The three ways Illustrator applies a gradient to a stroke. ## 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](https://gradiently.design/guide/gradient-logo) covers when a blend helps a mark and when a flat version is needed. An A4 portrait poster with a large headline over a soft gradient background An A4 poster at 2480×3508. Keep the background soft and the type flat or simply blended, so the words still read from across a room. ## 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](https://gradiently.design/guide/svg-gradients) explains the format. ```html ``` Roughly what a three stop linear gradient looks like after SVG export: the stops and offsets come straight from the Gradient panel. 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](https://gradiently.design/guide/print-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. ## FAQ ### Where is the Gradient panel in Illustrator? Open it from Window › Gradient. The Gradient tool itself is in the toolbar, shortcut G. ### How do I make a freeform gradient in Illustrator? Select a shape, choose Freeform in the Gradient panel, then add colour points in Points mode or draw a line of points in Lines mode. ### How do I apply a gradient to text in Illustrator without outlining it? Add a new fill to the text object in the Appearance panel and apply the gradient to that fill. The type stays editable. ### Can I apply a gradient to a stroke in Illustrator? Yes. Select the stroke in the Gradient panel and choose whether the gradient runs within, along or across the stroke. ### Do Illustrator gradients work in SVG? Linear and radial gradients export as native SVG gradients. Freeform and mesh gradients do not have an SVG equivalent.