I want to develop a little tool to help visualize fireworks before using them in a show in Unity where the user can set several parameters and gets a preview of the firework effect in a preview window. To allow the user to customize color over time like I can currently statically do in the visual effects graph, I wanted to add a Gradient input field to my UI.

After fiddling around with manually trying to make things work, I stumbled upon the new UIElements / UI Toolkit and following this Medium post was able to render a simple text UI in a Panel Renderer. However the Gradient Field I added won't show up (which is quite reasonable because in the UI Builder it said something about "Editor only").

Just to make sure, the box on the left is what I mean:

Screenshot showing a sample editor window with a gradient input, the HDR Gradient Editor and HDR Color Selector

I was strolling around in the Asset Store for a while but couldn't find anything like what I was looking for (just shaders and stuff to apply a gradient to UI elements amongst other things). Other searches led to tutorials on how to completely custom build a single color selection tool which both seemed like a larger effort and didn't allow creating a full gradient.

The question is: Is there some sort of library, package or tool I could use to add an input like that to my "game"? Or am I taking a completely wrong approach with this?

  • \$\begingroup\$ It looks to me like you'll have to re-implement this functionality in your game code, if it's not part of the Unity runtime but solely in the editor. \$\endgroup\$
    – DMGregory
    Aug 23 '20 at 15:29

It turns out that I am utterly bad at googling things! While "unity gradient input" and several attempts at going at it from UIElements and UI Toolkit didn't yield result, a brainfart reminded me that the thing you select a color in is called a color picker and look at that, there actually is an implementation of both a color and gradient picker available for free in the Easy Color & Gradient Picker.

It comes with a handy PDF telling you how to set up things and while intensity is not part of the input, building the gradient comes very close to the editor built in controls:

Screenshot of the gradient picker implemented by the Easy Color & Gradient picker


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .