Skip to content
← Adobe XD: Feature Requests (Read-Only)

Request details

Adobe XD: Feature Requests (Read-Only): 01 : Design mode

Categories

(thinking…)

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.

26 votes

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Jacob Birnbaum shared this idea  ·   ·  Report…  ·  Admin →

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Lee commented  ·   ·  Report

    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  ·   ·  Report

    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  ·   ·  Report

    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  ·   ·  Report

    The gradient tool in XD should be equal in features to all your other programs. We need percentages ASAP

  • Michel Feinstein commented  ·   ·  Report

    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  ·   ·  Report

    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  ·   ·  Report

    This is really important to convey to a developer how the Gradient should be configured on code.

  • Curtis G commented  ·   ·  Report

    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?