Spectrum is now read-only. Learn more about the decision in our official announcement.


Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!


Gradient Fill - Defining location in percentages

September 18, 2017 at 2:14pm
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Gradient Fill - Defining location in percentages

September 18, 2017 at 2:14pm
Image Hi,
love Figma so far! I'm running into this issue though that I have to re-create a gradient for a button fill and the handling of the location of the gradient colors isn't really precise enough.
Am I missing something or is there no way currently to change the "location" of where the color changes in the gradient?
Cheers Daniel
Show previous messages

January 17, 2018 at 7:46pm
🆙 Just started noticing this today :( The CSS that's outputting is getting decimals and off by a few percentage points from what I want it to be. For example:
background: linear-gradient(90deg, rgba(222, 222, 222, 0) 0%, #DEDEDE 52.29%, rgba(222, 222, 222, 0) 100%);
The 50% is 52.9% 😢
how are you trying to position it at 50%?
There's not a way to manually set position is there? It's just estimating right.
well I was trying to do it from the color picker window, since it seems to snap a little. Maybe was just an illusion :D
I was thinking the slider was snapping to each 1%
Oh interesting? It must be more fluid then that, huh.
whole percentages make sense. As does having some form of manual control over it
yeah, the gradient options have changed. You definitely could specify the stop position in the past :(
closest I can get to any manual control is to setting the values with the inspector
or maybe I’m just remembering wrong? I’m doubting myself now haha
I just could have sworn I learned that gradient stop trick from Rogie ( when he was doing some design stream
I’m fairly confident that specific stop percentages weren’t ever in there.
Darn, well sorry for the misinformation folks! The best I could do is to draw other shapes (¼ or ½ the size) & zoom in to get exact stop values.
I've definitely drawn specific shapes to help align stops before, but that's not perfect either.
regardless, close enough is usually close enough to help engineers make it precise via code
One of the many, many things I still miss from Fireworks…

October 1, 2019 at 3:30pm
YOOOOOO how has this been an open issue since 2017 lets get some positioning!!!

November 13, 2019 at 9:41am
I just got a message from Figma support that this "isn't going to be available in the near future" and I'm crying. All the Smart Animations, Smart Layouts, Smart Everything can't help when the absolute BASICS are not there. And actually, Figma has most of the basics right and better than ever before. But why this ommision?
You have the values in the code! What's the reason to not make it a user input? Surely it can't a technical or UX problem.
Show more messages