I have a gradient builder inside my app, and I am trying to use
style = "background-image : linear-gradient(...);" in order to preview the gradients to the user before committing it.
It works fine when adjusting the first stop, but once you adjust the second one, it fails to account for any stop positions at all and just uses a default 0% and 100%.
I’ve tested this using jsfiddle and some other css gradient generators to make sure my syntax is correct, so I am pretty confident this is a bug.
Would someone from Adobe please verify this, and perhaps suggest a different method for previewing gradients?
There was a thread about faking gradients in svg, so I guess I could draw like, 100 tiny rectangles and calculate the color transitions myself?
Here are some examples. Note that I am spitting out the formatted css from UXP, and then directly copy-pasting it into jsFiddle, so they are definitely using the same code.
linear-gradient(90deg, rgb(255,0,0) 82%, rgb(0,0,0) 100%)
linear-gradient(90deg, rgb(255,0,0) 16%, rgb(0,0,0) 37%)