Gradient fill angle

Hi, I’m seeing an angle on gradient fill, even though I should not. Is it something I’m doing wrong or a bug?


Hi @Regi ,

Hmm at first I could not recreate your screen, but I found out. I think its a bug, but I am not an expert on fills and gradients.

When first selecting linear fill you get a usercontrol to control the angle, color, etc. but also a control that is used in other fill-modes, but I dont see what to use for in linear:

If I use the handle and drags it towards the start-color nothing happens at first:

…but then if I release it on top of the start-color I get to your example:

From there on it just gets weird, sometimes I cannot get back to the control, and sometimes the colors are rotated:

Seems like a bug to me, but then again: I’m no expert on linear fill, perhaps there is some kind of reason behind this? :slight_smile:

This is a bug that I’ve reported for OVER A YEAR AGO, and which still has not been fixed. It is incredibly annoying that Figma can’t fix such a core bug making angled gradient styles unusable. The bug stems from the aforementioned usercontrol handle which controls the angle not resetting properly with the gradients orientation when applied to a different shape.

To replicate the bug, create a rectangle with angled gradient from one corner to another like below, note the position of the handle circled orange (shape one).

Now copypaste the gradient onto a new shape that is much wider instead (shape two).

You will notice that the circled handle is bugged, retaining its position relative to the shape instead of canvas, making gradient appear like it goes from top to bottom instead of diagonally from corner to corner.

To reset the gradient to its proper look, simply grab the circled handle and nudge it, it will snap to its intended position making gradient look proper (shape three)

This bug makes angled gradient styles unusable as they appear to be completely wrongly oriented.


Thanks for clarifying @Svarrie :+1: , your response finally make me understand the handle for controlling the gradient angle :

I was assuming than the angle for linear gradients was always 90 degrees relative to the startpoint/endpoint vector, but holding down alt you can control the absolute angle.

I learned something new :slight_smile:

Hi, do you have a link to the bug post? I’d try to bump it. It’s really annoying as this forces to disconnect a color style from any object that is of different shape than the linear gradient is defined on.

I think I finally figured out a workaround for this ridiculous bug.

I made a test file to illustrate the problem, which can be found here:

As you can see, there’s two gradients defined, “Gradient-1” and “Gradient-2”, as well as shapes they were created on under “source”. The issue becomes apparent on “Gradient-1”, which was created on a wide rectangle shape, and looks completely horizontal on the square to its right despite being defined as going from lower left corner to upper right corner. That isn’t right, is it?

When you click on the faulty gradient under “usage”, the issue is that its “handle” that is discussed in the thread is not at 90 degrees on the square, despite it being at 90 degrees when created on the source.

However, if I create the gradient on a perfect square, as on example on the right, the gradient handle retains its 90 degrees orientation on all shapes it is used on.

I have no idea why the handle doesn’t retain its orientation when created on non-perfect squares, but here you go.

Sorry, can’t find it anymore.

Thanks, the problem I’m having is using a gradient in a design system. Any shape that is not the same as a defined gradient shape for a fill style will have this issue with the gradient handle being not 90 degrees.

E.g. if I define my fill style gradient in a square and my button is of rectangular shape (non-square) then the fill for that button using that gradient style will be incorrect, making me detach the style to correct the handle to 90 degrees…

Making the design system useless as I’d have to update every single button.