CSS Gradients in Figma: Linear, Radial, Conic, and What Falls Back

Figma has four gradient types and CSS has three gradient families, so the map is not one to one. Linear and radial convert cleanly once you account for angle conventions. Figma's angular gradient is the same idea as CSS conic-gradient(). Figma's diamond gradient has no CSS function at all, so it needs a deliberate fallback.

This reference is for designers handing off fills and developers rebuilding them. It covers the type map, the angle and shape rules that trip people up, the conic syntax, what to do with diamond, and the browser support picture as of 2026.

The four Figma gradient types

Figma's help page lists four gradient types you can apply to a fill or a stroke:

• Linear: a progressive transition between two colors in a straight line.
• Radial: a circular gradient with one color at the center that transitions to another color on the edge.
• Angular: a gradient that progresses clockwise from the starting position.
• Diamond: a gradient with four points that starts in the center of the object, with width and height adjustable individually.

Every gradient starts with two color stops. You drag stops to move them, add more by clicking the color slider or the plus icon, and remove them with Delete or the minus button. "Flip gradient" reverses the stop order and "Rotate gradient" changes the orientation. Stops can also use variables, and a gradient can be saved as a style.

The map in one table

CSS also has repeating forms of each family: repeating-linear-gradient(), repeating-radial-gradient() and repeating-conic-gradient(). Figma has no separate repeating type, so those are a CSS-side pattern tool rather than something you map from a design.

Linear and radial: the conventions that differ

linear-gradient and the angle

In CSS, the angle in linear-gradient() is measured clockwise with 0deg pointing from bottom to top and 90deg pointing from left to right, according to MDN's guide to CSS gradients. With no angle at all, the gradient runs top to bottom. You can also use keywords such as to right or to bottom right.

.hero {
  background-image: linear-gradient(70deg, blue, pink);
}

This is where handoffs go wrong. A Figma gradient is defined by handles on the layer, not by a single CSS number, so the angle you read off the canvas has to be converted. A Figma community thread on exporting gradients reports that when converting through the API, "the angle gets messed up sometimes". That's one anecdotal report, not a rule. Still, it's a good reason to check the angle by eye against the rendered page before you trust a converted number.

radial-gradient shape, size, and position

radial-gradient() takes a shape, a size and a position: radial-gradient(shape size at position, stops). The shape is circle or ellipse, and the default is ellipse. The size keywords are closest-side, closest-corner, farthest-side and farthest-corner, and the default is farthest-corner. The position follows at, as in at 25% 75%.

.glow {
  background-image: radial-gradient(circle closest-side at 25% 75%, red, yellow 10%, dodgerblue 50%, beige);
}

If a Figma radial fill looks like a circle on a square layer but stretches on a wide layer, the CSS needs an explicit circle, because the default ellipse will follow the box. Stop positions can be percentages or lengths. Unspecified stops are spaced evenly, with the first at 0% and the last at 100%.

Stops, hard stops, and hints

Two stops at the same position make a hard edge. linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%) gives a sharp split. A color hint, a bare position between two colors such as lime, 20%, cyan, moves the midpoint of the transition. Figma gets there by stop placement. A hard edge is just two stops dragged to the same place.

Angular is conic

Figma's angular gradient and CSS conic-gradient() share the same model: colors sweep clockwise around a center point. MDN's reference for conic-gradient() gives the syntax:

.wheel {
  background-image: conic-gradient(from 45deg at 50% 50%, blue, red);
}

from <angle> sets where the sweep starts. It accepts deg, grad, rad and turn, and the default is 0deg, which is the 12 o'clock position. at <position> sets the center, uses background-position syntax, and defaults to center. You can also pick an interpolation space, for example in oklch.

Stops are angles, not percentages of a line

Conic stops are positioned by angle. If you omit positions, they are spread evenly, with the first stop at 0deg and the last at 360deg. Figma places angular stops along its own color slider, so you have to convert each position into degrees or turns. A stop at 25% of the slider becomes 90deg or 0.25turn.

Hard stops and the pie pattern

Equal angles give hard edges, which is how a pie slice is drawn:

.pie {
  background-image: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

One warning from MDN applies to design handoff too. Gradients are images, and they are not exposed to screen readers. Do not use a conic gradient to carry data that someone needs to read. Use SVG or semantic markup for a real chart.

I haven't verified the exact CSS any specific tool emits for an angular fill. Treat the mapping above as the conceptual rule, and check generated output against the rendered result.

Diamond: no CSS function, so what falls back

CSS defines linear, radial and conic gradients and their repeating forms. There is no diamond function. A diamond fill in Figma therefore cannot be written as a single background-image value.

You have three honest options:

1. Approximate it with layered gradients. Stack linear-gradient() layers with transparent stops. This works for simple shapes and gets fragile fast.
2. Keep it as an image or SVG. If the diamond is a decorative fill with fixed dimensions, an exported asset is the most predictable result.
3. Redesign it as radial. If the look matters more than the exact shape, a radial-gradient() is the closest native gradient.

These are guidance, not measured results. I'm not claiming how any particular tool exports a diamond fill, because I didn't verify that. Decide on purpose rather than discovering the fallback in a review.

Browser support and the fallback you write

conic-gradient() is Baseline widely available since November 2020 according to MDN. Can I use reports 97.21% global support as of 2026, with Chrome 69, Edge 79, Safari 12.1 and Firefox 83 as the first supporting versions. Internet Explorer and Opera Mini do not support it.

A gradient is an image, not a color, so it does not work in background-color. A color fallback therefore has to be its own declaration written before the gradient:

.badge {
  background-color: #3b5bdb;
  background-image: conic-gradient(from 0deg, #3b5bdb, #e8590c, #3b5bdb);
}

Browsers that cannot parse the gradient drop that declaration and keep the solid color. Gradients also have no intrinsic size, so they stretch to fill the box they are painted into.

Gotchas when a gradient crosses the boundary

When you bring a built page into Figma, or send a Figma fill to code, check the same short list every time:

• The angle, against the CSS convention where 0deg points up.
• Stop positions, in the unit the target expects: percentages for linear, angles for conic.
• The center position and, for radial, the shape and size keywords.
• Stops bound to Figma variables, which are resolved values on the CSS side.

If you are importing existing pages, UnHTML is one way to get the layers into Figma, and the same checklist applies to its output: open the gradient fills and compare them to the page.

Summary

Linear and radial convert once you handle the angle and shape rules. Angular is conic with stops in degrees. Diamond has no CSS function, so choose an approximation, an asset or a radial redesign on purpose. Write a solid background-color before any gradient you ship.

Frequently Asked Questions

Does Figma have a conic gradient?

Figma calls it an angular gradient. It progresses clockwise from the starting position, which is the same sweep model as CSS conic-gradient(). The CSS side starts at 12 o'clock and rotates clockwise.

Is there a CSS equivalent of Figma's diamond gradient?

No single CSS gradient function draws a diamond. CSS has linear, radial and conic gradients plus repeating variants. A diamond has to be approximated, for example by layering gradients, or kept as an image.

Which way does 0deg point in a CSS linear-gradient?

0deg points from bottom to top and 90deg points from left to right, increasing clockwise. The default with no angle is top to bottom. This is why an angle read off a Figma handle rarely matches the CSS number directly.

Can I use conic-gradient in production?

As of 2026, Can I use reports 97.21% global support, with Chrome 69, Edge 79, Safari 12.1 and Firefox 83 as the first versions. Internet Explorer and Opera Mini do not support it, so add a solid background-color before it.