I have the following gradient with 13 steps:

enter image description here

This is the output of https://cssgradient.io/ I used to create it:

background: rgb(52,17,46);
background: linear-gradient(90deg, rgba(52,17,46,1) 0%, rgba(111,31,71,1) 8%, rgba(140,46,144,1) 17%, rgba(110,84,199,1) 25%, rgba(77,137,187,1) 33%, rgba(69,173,136,1) 42%, rgba(71,195,61,1) 50%, rgba(181,218,48,1) 58%, rgba(240,134,32,1) 67%, rgba(255,193,44,1) 75%, rgba(255,215,107,1) 83%, rgba(255,234,170,1) 92%, rgba(255,255,255,1) 100%);

Now I need to use that in my Unity game, the thing is, their gradient object only accepts 8 steps.


How can I convert this 13 steps gradient to a gradient with 8 steps?

(any tool or tutorial would be appreciated)


You can use any graphics design or image editing software to do this - I'll choose Illustrator in this case.

You have several gradient stops which are there to preserve subtleties of transition, and several which appear truly superfluous - I'll mark those out with a red "X" and try removing them - I'll alter the spacing od the gradient around the removals to visually compensate and see how close we can get.

13 stops per post enter image description here

Marked "X" for removal enter image description here

8 stops gradient - not a perfect match, but pretty darn close. enter image description here

I think you can safely eliminate the stops I did and tweak a bit inside Unity in the Shader graph and get what you need done.

Hope this helps.

  • I was hoping for a tool that'd magically do that but I guess I'm asking for the impossible ... anyway, thanks !
    – aybe
    Apr 8 '19 at 22:27
  • Trouble with automated tools is that to get a smooth perceptual gradation fitting the human visual system takes a pretty advanced AI, and though these sorts of things are indeed in development and often get included into tools like Photoshop, at the time of writing, I'm unaware of one which does this anything like as well as the human eye and training. Apr 8 '19 at 22:30
  • Makes sense, I think I'm just going to copy and paste what you've done on your screenshots because I only ever have this gradient to convert. And graphic design is a topic I am not exactly versed in :)
    – aybe
    Apr 8 '19 at 22:43
  • You always have the workaround of converting your proposed gradient into a texture... depends on what you’re using it for in Unity. Apr 8 '19 at 22:56
  • 1
    Well you know what, I've simply dropped the idea because such gradient looks dull against a background like PS one ... :) So I've reverted to a simple yet very clear single color bar though I might go your last way again (texture) (btw if you have an idea on how I could make it look it nice against a #1F1F1F background you're welcome) Here's the WPF app, it does not make any assumption, just parses colors then samples the the gradient (then you are supposed to grab a PNG out of it) should be trivial to improve drive.google.com/file/d/1AdJndQ3RnWLvP2u3udRtFdzW8LZMtCZY/…
    – aybe
    Apr 9 '19 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.