# Figma gradients: tips for smoother results

[Canonical HTML page](https://gradiently.design/guide/figma-gradient)

Figma makes a gradient in two clicks and a good one in twenty. Here is the fast path through the gradient editor, plus the fixes for grey middles, banding and CSS that does not match.

## The short version

- Figma offers four gradient fill types: linear, radial, angular and diamond, all chosen from the fill type menu in the colour picker.
- Gradient direction and length are set with handles on the canvas, and new colour stops are added by clicking the gradient bar in the picker.
- Long Figma gradients between distant hues can turn grey in the middle, so add a middle stop in a brighter in-between colour.
- Linear, radial and angular gradients have direct CSS equivalents, but diamond gradients do not and are best exported as images.
- A mesh-like gradient in Figma is usually made by blurring a group of coloured ellipses, and grain hides banding in the export.

To make a **Figma gradient**, select a layer, click its fill swatch, and change the fill type from Solid to Linear, Radial, Angular or Diamond. Handles appear on the canvas: drag them to set the direction and reach of the blend, and click the gradient bar in the picker to add colour stops. That takes seconds. Making it look smooth, rich and identical once it reaches code takes a few more habits, which is what this guide is about.

## The four gradient types in Figma

- Linear: `linear-gradient(135deg, #0f172a, #4338ca 55%, #a5b4fc)`
- Radial: `radial-gradient(ellipse at 50% 50%, #fde68a, #f97316 45%, #7c2d12)`
- Angular: `conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9)`

Linear, radial and angular fills, drawn here with their CSS equivalents. Diamond has no CSS counterpart.

| Figma fill | What it draws | CSS equivalent |
| --- | --- | --- |
| Linear | A blend along a straight line | `linear-gradient()` |
| Radial | A blend outwards from a centre, as an ellipse | `radial-gradient()` |
| Angular | A sweep of colour around a centre | `conic-gradient()` |
| Diamond | A blend outwards in a four-pointed diamond | None; export as an image |

Figma's gradient types and how they translate to the web.

Linear suits most backgrounds and buttons. Radial suits glows and spotlights. Angular draws colour wheels, dials and metallic sheens. Diamond is rarely needed; it gives a faceted, four-way glow that looks distinctive in illustration but has to become a bitmap on the web. For how each type behaves in design generally, see [the types of gradients](https://gradiently.design/guide/types-of-gradients).

## Working the gradient editor

1. **Set the direction with the handles** One handle marks where the first colour sits, the other where the last one does. Drag the end handle past the edge of the frame for a gentler blend, or pull it in for a shorter, steeper one.
2. **Add stops on the bar** Click anywhere on the gradient bar in the colour picker to add a stop, then give it a colour. Select a stop and press Delete to remove it.
3. **Use stop opacity for fades** Each stop has its own opacity. Fading a colour to 0% opacity lets a gradient overlay a photo or another fill.
4. **Stack fills** One layer can hold several fills. Add a second gradient above the first, with transparent areas, to layer a glow over a base blend.
5. **Save it as a style** Save the finished fill as a colour style so the whole team uses the same gradient. Figma variables do not hold gradients, but styles do.

> **Radial handles** Radial and diamond fills have a third handle that sets the width of the ellipse independently of its height. Stretching it is how you make a wide horizon glow instead of a round spotlight.

## Fixing grey middles and muddy blends

Figma blends colour stops directly, much like CSS does by default, and has no option to blend in a perceptual colour space. A long blend between distant hues, such as blue to orange or blue to yellow, sags into grey in the middle. The fix is a middle stop: pick the colour you want the midpoint to be, usually a brighter in-between hue, and add it by hand. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) explains the colour theory.

- Two stops: grey middle: `linear-gradient(90deg, #2563eb, #f97316)`
- Middle stop added: vivid: `linear-gradient(90deg, #2563eb, #db2777 50%, #f97316)`

Blue to orange, before and after one extra stop. The middle stop routes the blend through pink instead of grey.

## Mesh-like gradients in Figma

Figma has no mesh gradient tool, but a convincing version is quick to build. Draw four or five ellipses in your colours, overlapping, inside a frame with a dark or light background. Group them, add a large Layer blur to the group, and clip the frame's content. Move the ellipses around to rebalance the colour. This is the same idea as the layered technique in [CSS mesh gradients](https://gradiently.design/guide/css-mesh-gradient), and [mesh gradients](https://gradiently.design/guide/mesh-gradients) covers the design side.

### Avoid

- Equal-sized ellipses spaced evenly
- Opposite hues overlapping in the centre
- Small blur values that leave hard ellipse edges
- Exporting a large, dark, blurred mesh with no grain

### Do

- One dominant blob, two or three smaller ones
- Neighbouring hues overlapping, contrasts kept apart
- A blur large enough that no edges remain
- A faint noise layer on top before export

## Adding grain to hide banding

Smooth gradients exported as 8-bit PNG or JPEG can show visible steps, especially in dark, slow fades. A light layer of noise breaks those steps up. Recent versions of Figma include noise and texture options in the Effects panel; otherwise, place a tiling noise image on top of the gradient with a blend mode such as Overlay or Soft light at low opacity. [Gradient banding](https://gradiently.design/guide/gradient-banding) explains why this works, and [grainy gradients](https://gradiently.design/guide/grainy-gradients) why it also looks better.

## Exporting and matching Figma gradients in CSS

In Dev Mode or the Inspect panel, Figma shows CSS for gradient fills. Treat it as a starting point and check three things. First, the angle: the handles you dragged on a non-square frame may translate to an angle you would not have chosen, so round it to a clean value. Second, the colour profile: if your file uses Display P3, the same hex values can look different in an sRGB browser. Third, stacked fills: they become comma-separated gradients, with the top Figma fill listed first.

```css
/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}
```

Typical translations. Keep a flat fallback colour taken from the gradient's darkest stop.

For images, export at 2x for sharp results on high-density screens, and prefer PNG for gradients with transparency. For gradients that must stay vector, SVG export writes linear and radial fills as SVG gradients; see [SVG gradients](https://gradiently.design/guide/svg-gradients) to understand what you get. Diamond fills, blurred meshes and noise always come out as pixels.

If you build a lot of gradient backgrounds for social posts, decks and banners, a tool that renders the same material at every size saves re-exporting. In Gradiently, a Mark renders live at each format rather than being cropped from one export.

## FAQ

### How do I make a gradient in Figma?

Select a layer, click its fill swatch, and change Solid to Linear, Radial, Angular or Diamond. Drag the handles on the canvas and click the gradient bar to add stops.

### How do I add a colour stop to a Figma gradient?

Click anywhere on the gradient bar in the colour picker. Select a stop and press Delete to remove it.

### Can Figma make mesh gradients?

Not natively. Overlap several coloured ellipses, group them and apply a large Layer blur, or use a plugin.

### Why does my Figma gradient look different in the browser?

Check the angle Figma exported, whether the file uses a Display P3 colour profile, and whether stacked fills were translated in the right order.

### Can I copy a Figma gradient as CSS?

Yes for linear, radial and angular fills, via Dev Mode or the Inspect panel. Diamond gradients have no CSS equivalent and should be exported as images.