How to Convert a Figma Gradient to CSS

• Dev Mode. The Code section of the Inspect panel. Dev Mode needs a paid plan and a Full or Dev seat. More in how to open Figma Dev Mode.
• Copy as code. Right-click the layer and choose Copy/Paste as > Copy as code > CSS. This works in Design Mode, including for people with view-only access.
• Nothing at all? If the file owner has turned off copying and sharing, the Code section doesn't appear. Ask for access or for the values.

The design panel itself doesn't show an angle. Figma's gradient editor has handles on the canvas, colour stops, and Flip and Rotate buttons, but no degree field. That's why you need the code view to get a number.

Figma and CSS draw gradients in different ways.

• CSS runs the gradient along a line through the centre of the box at a set angle. 0deg points up, and angles go clockwise, so 90deg runs left to right. The line's length depends on the box, so the ends of the gradient always reach the corners.
• Figma places the gradient with the handles you drag, then treats it like an image that stretches with the layer. Resize a rectangle and the visible angle changes.

On a square, the two agree. On a wide or tall box, a diagonal gradient in Figma and the same angle in CSS point different ways. The 9elements team wrote up the maths in Gradient angles in CSS, Figma & Sketch. Their conclusion: outside multiples of 90°, you can't reproduce CSS behaviour exactly in Figma.

The forum thread's example had stops at -42.51% and 144.22%. That happens when the Figma handles don't sit on the ends of the CSS gradient line. The CSS is still valid. Stops outside 0–100% just mean the colours start and end beyond the edges of the box. If you'd rather have clean numbers, drag the Figma handles to the edges or corners of the layer before you copy.

1. Vertical or horizontal. Keep the handles straight up-and-down or side to side. 180deg and 90deg match Figma at any size.
2. Corner to corner. Drag the handles exactly onto opposite corners, then write the CSS with keywords such as linear-gradient(to bottom right, …). CSS keywords adapt to the box's shape, which matches how Figma stretches a corner-to-corner gradient.
3. Any other angle. Copy the snippet, then compare in the browser at the size the element will really be. If the element changes shape at different screen sizes, the gradient will too, in a way Figma doesn't show.

Radial gradients come out as radial-gradient() with the ellipse size and centre as percentages, such as radial-gradient(183.69% 86.67% at 30.59% 81.58%, …). A forum report shows one looking much wider in the browser than in Figma, on a 272 × 56 layer. If yours doesn't match, adjust the two size values by hand. A rotated ellipse is another trap: CSS radial gradients can't rotate the ellipse, so keep radial gradients unrotated in Figma if they're going to code.

CSS has conic-gradient() for angular gradients but nothing for diamond. Figma's help center doesn't document what Dev Mode outputs for these two. Check the snippet, and expect to rebuild a diamond gradient another way, such as an image.

Neither API gives you an angle. The Plugin API positions a gradient with gradientTransform, a transform matrix, and the REST API returns gradientHandlePositions, three points in the layer's 0–1 space. The forum's accepted approach for plugins is extractLinearGradientParamsFromTransform from the @figma-plugin/helpers package, which turns the matrix back into start and end points. Rotated layers make it harder, and radial gradients are harder still.

If you'd rather not do the maths, code export plugins generate the CSS for you. Compare their gradients with Dev Mode before you trust either.

For the rest of the handoff, see Figma design specs for developers. Gradients also cause trouble in slides: PowerPoint export turns them into solid colours, as covered in Figma to PowerPoint.