Show/edit Gradient stop position as precise number
The gradient fill, in it's current form, does not show what position (from 0 to 1, or 0 to 100) the stop is located, like in other popular adobe applications such as Illustrator and Photoshop. This means that if I want the accurate position for each stop I have to export it to SVG and open it in Illustrator. This makes it really hard to make gradients with a middle fade accurately, and since there is no way to actually save the gradient as a swatch, you're stuck eyeballing it.
Jacob Birnbaum
shared this idea
-
Lee
commented
It would be great to know what position each of my colour stops are. E.g. is the colour in the middle here at 50%?
-
Benedikt Zehetmayer
commented
Until there is a proper implementation, I found a workaround to get the exact percentage.
1, Select the object which you applied gradient on.
2, Export it as a SVG
3, check out SVG XML and you will find similar lines to these:
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="red"/>
<stop offset="0.456" stop-color="blue"/>
<stop offset="1" stop-color="green"/>
</linearGradient>4. Offset property equals to percentage in css
Maybe it will be handy for someone :)
-
Rémi Dion
commented
Make a rectangle 100px high, drag some guides where you will blend another color (it's pixel to percent made easy) and drag your gradient slider there. Should be precise enough.
Of course we'll need something more precise the day we can export CSS code... -
DBL commented
The gradient tool in XD should be equal in features to all your other programs. We need percentages ASAP
-
Michel Feinstein
commented
The answer is 54.8% (or 0.548), how do I know? The tricks is to export the gradient to SVG, open it into a Text Editor and look for the "offset", it would be something like this:
<stop offset="0.548" stop-color="#46addb"/>
-
Michel Feinstein
commented
Currently there's no way to know the percentage of the Gradient Stops.
I need to know where each color on the gradient is (from 0 to 1 or 0% to 100%) in order to translate this into code for an App.
In the image attached you can see the problem. Tell me where the middle circle is. It's not at 50%, maybe 57%? Maybe 55%? This wastes development time for something so simple.
-
Michel Feinstein
commented
This is really important to convey to a developer how the Gradient should be configured on code.
-
Curtis G
commented
Would love to be able to have fields to show % placement of breakpoints/color shifts in a gradient. They are in a slider so can you display the % location and allow me to slide or just enter the exact location I want the new color to be?