How to Make a Gradient in Figma: Color Blending Tips

html

The gradient option sits one click away from the solid swatch in the Fill row, and most people never go looking for it. Swap the fill type and your flat rectangle picks up two or more color stops that blend along a handle you can drag anywhere on the canvas.

Buttons, backgrounds, hero panels. That’s where it usually ends up in production work, applied inside frames and components rather than on loose shapes.

In April 2024, Figma’s plugin API added a boundVariables field to each gradient color stop, letting a single design token drive that stop’s color across every instance built from it (Figma, 2024).

What Is a Gradient in Figma?

Two colors, minimum. That’s the whole requirement, plus a handle that decides how they meet.

Figma treats it as a fill type, so it lives in the same row of the right sidebar as the solid color swatch you already use. Solid, gradient, pattern, image, and video are the options in that dropdown (Figma Help Center). A solid fill holds one hex value. A gradient holds stops, and the handle is what makes it a gradient rather than a flat color.

Fills are the obvious target. Strokes and text layers accept one too, which is the part people forget:

• Fill, the interior of a shape, frame, or closed vector
• Stroke, the outline running around a shape or an open path
• Text, meaning the characters themselves

That reach is why gradients turn up constantly in interface design, on everything from a login button to a full bleed hero background.

What Are the Gradient Types in Figma?

Linear, radial, angular, diamond. The dropdown lists them in that order, and each one pushes color away from the handle differently. Picking the wrong one is the fastest way to make a background look accidental.

The API uses the same names the dropdown does: gradient-linear, gradient-radial, gradient-angular, gradient-diamond (Figma widget API documentation).

Diamond gets used least, and I don’t think that’s unfair. It photographs well in a demo file and rarely survives contact with real content sitting inside the shape.

Want to see how a linear or radial blend behaves before you open Figma? A browser based gradient generator built for CSS produces almost identical curves.

How Do Gradient Handles Control Direction and Angle?

Apply a gradient and Figma draws a handle line straight onto the selected shape. Drag any part of it and the blend updates live.

• Drag the far endpoint around the origin to rotate the blend
• Drag the origin itself to move where the blend starts
• Shorten or lengthen the handle to compress the transition or spread it out

Under the hood this is stored as exactly three vectors in a property called gradientHandlePositions, one for the origin and two for direction and spread (Figma widget API documentation).

Nothing snaps to fixed compass angles. Any position on the canvas is valid, which is also why two designers working from the same brief almost never land on the same gradient by eye.

How Do Color Stops and Opacity Work in a Gradient?

A color stop is one color pinned to one position along the handle. You need at least two before anything blends.

Everything happens on the gradient bar inside the color picker. Click the bar to add a stop, click an existing stop to change its color or hex value, drag a stop off the bar to get rid of it.

There’s no cap on how many stops one gradient can carry. Five or six is normal for a busy background.

Converting a stop’s color from RGB by hand gets old fast, so an RGB to hex conversion tool is worth keeping in a tab.

Figma’s paint structure stores every stop as a position and color pair, with transparency controlled by an opacity value between 0 and 1, defaulting to 1 for a fully solid stop (Figma widget API documentation). That value is per stop, not per layer. So one end of the blend can fade to nothing while the other stays completely opaque.

Naming stops matters more than it sounds once you’re building a shared library. A color name lookup tool turns a raw hex code into something a teammate will actually recognize in a list.

How Do You Create a Gradient in Figma?

Select, open Fill, switch to Gradient, pick a type, edit the stops, drag the handle. Roughly six clicks if nothing goes wrong.

1. Select the shape, frame, or text layer you want to fill
2. Open the Fill section in the right sidebar and click the color swatch
3. Switch the fill type dropdown from Solid to whichever gradient type you want
4. Click the gradient bar to add stops, then set each stop’s color
5. Drag the handle on the canvas until the angle, position, and spread look right
6. Save it as a shared style if other frames will reuse it

That last step is the one everyone skips. Without a saved style, every new gradient starts from zero, and rebuilding the same five stops twice is a special kind of tedious.

Teams migrating a design system from Sketch to Figma often rebuild flat-color components as gradients along the way, using Auto Layout rather than nested groups so the new fill holds its shape as the component resizes.

Speed here is muscle memory, not technique. Learning Figma’s broader keyboard shortcuts cuts the constant hopping between the fill tool, the shape tools, and the selection tool.

How Do You Apply a Gradient to a Stroke or Text Layer?

Same process, different color picker. Text has one limitation you’ll want to know about before you start, though.

Applying a Gradient to a Stroke

Figma treats a stroke as its own fill, completely separate from the shape’s interior. A stroke fill is the visible outline running around a closed shape or an open vector path, and it accepts a gradient the way any normal fill does (Figma Help Center).

• Select the shape or path
• Open the Stroke section rather than Fill
• Click the swatch, switch the type to Gradient

This is how outlined buttons get a border that fades from one hue into another. Starting from nothing? The steps for building a button in Figma handle the base shape first.

Applying a Gradient to Text

Text pulls a gradient through the ordinary Fill section, and the blend maps onto the letterforms directly.

What trips people up is that changing a text layer’s fill only recolors the characters. It never touches whatever sits behind them. For a gradient panel under a headline, the text has to live inside a frame, and the gradient goes on the frame.

Small type loses the effect anyway. There isn’t enough surface area for more than a stop or two to read.

Once the fill looks right, tracking and line height and alignment matter far more than the color. The details of editing text in Figma cover those.

How Do You Change the Blend Mode of a Gradient?

Blend modes decide how a gradient’s colors mix with whatever sits beneath, running the same math as Multiply, Screen, or Overlay in any image editor. Figma keeps the setting apart from the color stops, over in the top right corner of the color picker panel.

There are 19 blend modes in total, grouped into six families: Default, Darker, Lighter, Contrast, Comparative, and Color (Figma Help Center).

Normal is the default for any fill, gradients included, and only one mode applies per fill layer.

Stack two or three gradient fills on one object, each with its own blend mode, and you get depth that a single gradient can’t produce. It’s fiddly. It also looks considerably better than the alternative.

A browser side color filter generator runs on the same darken and lighten logic, just applied to a whole element instead of one fill.

How Does Figma Export a Gradient as CSS Code?

Dev Mode’s Code panel converts a selected gradient fill into paste-ready CSS. Switch the file into Dev Mode, select the layer, open the Code section of the Inspect panel.

The mapping is mostly one to one:

• Linear gradient exports as linear-gradient()
• Radial gradient exports as radial-gradient()
• Angular gradient exports as conic-gradient()
• Diamond gradient comes out as an approximated radial-gradient(), because CSS has no dedicated diamond function

CSS ships three native gradient functions total (CSS Images Module, W3C). That’s the whole reason diamond is the odd one out on export.

Copy the declaration into a stylesheet and it renders as is. No repainting the blend by hand, no squinting at hex stops.

Reading that output next to the rest of the Dev Mode workflow makes handoff smoother for whoever opens the file after you. And if the stylesheet is already dense, push the copied rule through a CSS minifier before it ships.

Which Gradient Type Fits Buttons, Backgrounds, and Text?

Linear for buttons. Radial or diamond for backgrounds. Angular stays rare, and flat color usually beats any gradient on dense body text.

Worth knowing what a gradient costs you against a plain fill before you commit.

A gradient fill adds depth and a sense of light direction, pulls the eye toward a focal point, and takes ongoing attention to keep accessible.

A solid fill reads instantly with nothing to interpret. Contrast is trivial to guarantee. Next to a more textured layout it can look a bit dead, which is the trade.

Buttons and Interactive Elements

A linear gradient running light to dark, top to bottom, reads as a raised button. Flip the direction and it reads as pressed in. UX Movement has written about this convention in detail.

Keep the angle close to vertical. A steep diagonal on a small button reads as a mistake far more often than as a decision.

Build the base shape first so you can judge it properly. The same light-to-dark convention shows up in a CSS button generator, which is worth comparing against your Figma version before handoff.

Backgrounds and Hero Sections

Radial and diamond gradients earn their keep here, because a background has the surface area for a focal point to actually land.

Center a radial gradient behind a headline and the eye goes there first. Push a diamond off-center and it breaks up a hero panel that would otherwise sit flat.

Most hero section gradients live in one of those two spots, either layered under a photo or standing on their own as the full background.

Text and Small UI Elements

Skip the gradient on body copy.

A paragraph needs one flat, dependable color. When the tone shifts underneath a block of small type, every single line has to earn its contrast separately instead of once.

Headline words, a logo mark, a badge. Those can take a gradient fill because none of them carry the reading load a paragraph does.

When Should You Use a Plugin for Mesh or Multi-Point Gradients?

Figma’s native tool tops out at a straight or curved blend between however many stops you hang on one handle. A true mesh gradient needs color shifting freely in several directions across the same surface, and none of the four native types will do that.

The native tool is free, built in, and limited to one directional blend per fill. A mesh plugin gives you multiple anchor points spread across the surface, usually costs money, and bakes its output flat.

Mesh gradients for Figma runs $9.99 a year per designer as a yearly subscription rather than a one time purchase (Mesh gradients for Figma product page).

That flattened output is the actual trade off. A native gradient stays live, defined by editable stops and a handle you can grab again next week. Most mesh plugin results collapse into a single image layer, closer to a raster file than an SVG shape.

So skip the plugin the second a two or three stop blend does the job. Paying for mesh flexibility on a background that only needed a radial fade is money spent on a problem you didn’t have.

When Do Gradients in Figma Fail or Cause Problems?

Contrast failures over busy blends, banding between close hues, overrides vanishing during a variant swap, and export code that doesn’t match the canvas. Those cover most of what goes wrong.

Accessibility and Contrast Failures

Text over a gradient background fails an accessibility check the moment any part of the blend falls under the required ratio.

WCAG 2.2 puts that floor at 4.5 to 1 for normal text and 3 to 1 for large text, measured at every point the text crosses rather than as an average (W3C, WCAG 2.2). A headline that passes comfortably over the light end of a blend can fail outright by the time it reaches the dark end.

Push the lightest and darkest stop through a color contrast checker before shipping and you’ll catch it before a user does.

Stops sitting too close in hue cause something different: banding, that gray or muddy stripe where the blend should look smooth. It shows up most when the two stops span a wide range of saturated color with nothing in between.

Technical and Export Failures

Instance overrides don’t always survive a variant swap.

Figma keeps a gradient override only when the layer name matches and the original fill matched between variants, so flipping a button to its hover variant can quietly drop your custom gradient back to that variant’s default fill (Figma Help Center).

The fix is to apply the gradient inside the main component and let instances inherit it, rather than overriding fills one instance at a time. Anyone building multiple states from scratch should read through creating variants in Figma before touching fills at all.

CSS export has its own gap. A blend mode sitting on top of a gradient renders correctly on the canvas, but the generated code in Dev Mode often carries just the base gradient function and leaves mix-blend-mode out. The copied version looks flatter than the design until somebody adds that property by hand.

FAQ on How To Make A Gradient In Figma

What Is the Difference Between a Gradient Fill and a Solid Fill?

One hex value covers the whole layer with a solid fill.

A gradient blends two or more stops along a handle, shifts tone across the shape, and takes more effort to keep readable and easy to edit later.

Is a Gradient Better Than a Solid Color or Image Fill?

Nothing wins outright here.

Gradients add depth without the file weight of an image, solid color gives you the most predictable contrast, and image fills are the right call for photography. What sits on top of the fill decides it.

Does a Gradient Fill Affect File Size or Performance?

Barely.

A native gradient is stored as a handful of color stops and a handle, not pixels, so the weight is negligible. Mesh plugins that bake the result into a flattened image are a different story.

How Do You Save a Gradient as a Reusable Style?

Click the four-dot icon next to the fill once it looks right, then name it. It shows up under Styles for every layer in the file.

Publish the file as a library to share it beyond that one file.

Can You Copy a Gradient Between Components or Files?

Copying a layer brings the gradient with it, stops and handle position and opacity intact.

Across separate files, publish it as a shared style through a team library first. Otherwise every file ends up with a disconnected copy that drifts.

Are There Keyboard Shortcuts for the Gradient Tool?

No dedicated key flips a fill to gradient.

Single-key shortcuts are reserved for tools like the eyedropper, so getting to a gradient still means opening the Fill dropdown and picking the type by hand. Every single time.

Does Figma Support Mesh Gradients Natively?

It doesn’t. The native types stop at radial, linear, angular, and diamond blends from a single handle.

Designers have been asking for native mesh support on the community forum for a while, and it still needs a third party plugin.

What Should You Fix First When Setting Up a Gradient in Figma?

Settle the handle and color stops before you touch blend mode, contrast, or CSS export. Those later settings all read the position and color values the handle already defines, so moving the base afterward invalidates everything downstream.

The order that works:

• Handle position and color stop hue
• Type and application target matched to what the layer is actually for
• Contrast check and CSS export, last

Yes, locking stops early means a failed contrast check sends you back to the same panel. That one revision still costs less than untangling a blend mode and an export mismatch on a base that keeps shifting.

Binding those stops to a design token stops the whole sequence from repeating on every new frame. The Figma variables guide covers that workflow properly.