About UIToolkit Gradient Backgrounds and Borders
- Tools, Systems & Learning > Development Tools & Automation
This asset is NOT for uGUI. It’s for the new UI Toolkit and requires Unity 6.3+.
It adds gradient support via the gradient painter API introduced in Unity 6.3.0f1.
✔️ Works with UI Builder, USS Style Sheets and C# Code
Whatevery our prefered workflow is this tool has you covered.
✔️ Gradients are saved in your UXML
All the data is right there in your UXML file ready to be shared, copied, ... .
✔️ No custom element needed (it uses Manipulators)
You can add it easily to any of your existing visual elements, no custom element or uxml change required.
✔️ Undo/Redo Support
Full undo and redo support in case you want to revert your changes.
✔️ UPM Package
It's all conveniently placed in a upm package so it stays out of your Assets folder.
✔️ Examples included
Check out the Samples in the Unity Package Manager to get demos like the mouse following radial gradient.
✔️ Full Source Code included
I publish this asset with full source code because as a developer I know how annoying it is to not have source code access. If you like it then please remind others to purchase the plugin. Don't just copy and paste it everywhere. Thank you
✔️ Supports Unity 6.3+ LTS
It should work on any platform that supports UI Toolkit. Yes, it works with WebGL.
⚠️ READ THIS BEFORE YOU BUY ⚠️
Currently there is a bug in Unity 6.3 that does not allow the radius of radial gradients to be controlled (meaning the size is always the same). I have reported it and it was approved as a bug by Unity but there is no fix yet.
In the meantime I have added at TEMPORARY "size" option on the radial gradients but please be aware that it may be removed (or replaced by a "Radius" option) once this is fixed. You can follow the progress here on Unity Discussions or vote on the offical bug here.
Also: not all USS radial style options are supported. For example you can only specify one gradient and some of the more advanced positioning or natural language options will not be parsed.
Usage (UI Builder)
1. Scroll to the Background (or Border) section and tick the "Enable Gradient" checkbox.
2. You are done. Enjoy your gradients.
Usage (USS Stylesheets)
Step 0 is me assuming you have added the stylesheet to your layout (just mentioning it as it's oftern forbotten ;-)
1. In UI Builder (or in your uxml file) select the element you want to add a gradient via USS styles to.
2. Add a USS class name to activate gradient rendering for that element. The names are: kamgam-gradient-bg for backgrounds and/or kamgam-grandient-border for borders. These will let the gradient system know that these elements should be watched.
3. Now you can add a custom style to your USS file (one for borders and one for backgrounds). Example: --kamgam-border-gradient: "linear-gradient(#000000, #F3FD2d)"; for borders or --kamgam-background-background: .. for backgrounds
Usage (Code)
1. Import the Kamgam.UIToolkitGradients namespace. This will give you access to some handy VisualElement extension methods.
2. Call element.SetOrAddBackgroundGradient(gradient); or element.SetOrAddBorderGradient(gradient); to add a gradient to an element.
It adds gradient support via the gradient painter API introduced in Unity 6.3.0f1.
✔️ Works with UI Builder, USS Style Sheets and C# Code
Whatevery our prefered workflow is this tool has you covered.
✔️ Gradients are saved in your UXML
All the data is right there in your UXML file ready to be shared, copied, ... .
✔️ No custom element needed (it uses Manipulators)
You can add it easily to any of your existing visual elements, no custom element or uxml change required.
✔️ Undo/Redo Support
Full undo and redo support in case you want to revert your changes.
✔️ UPM Package
It's all conveniently placed in a upm package so it stays out of your Assets folder.
✔️ Examples included
Check out the Samples in the Unity Package Manager to get demos like the mouse following radial gradient.
✔️ Full Source Code included
I publish this asset with full source code because as a developer I know how annoying it is to not have source code access. If you like it then please remind others to purchase the plugin. Don't just copy and paste it everywhere. Thank you
✔️ Supports Unity 6.3+ LTS
It should work on any platform that supports UI Toolkit. Yes, it works with WebGL.
⚠️ READ THIS BEFORE YOU BUY ⚠️
Currently there is a bug in Unity 6.3 that does not allow the radius of radial gradients to be controlled (meaning the size is always the same). I have reported it and it was approved as a bug by Unity but there is no fix yet.
In the meantime I have added at TEMPORARY "size" option on the radial gradients but please be aware that it may be removed (or replaced by a "Radius" option) once this is fixed. You can follow the progress here on Unity Discussions or vote on the offical bug here.
Also: not all USS radial style options are supported. For example you can only specify one gradient and some of the more advanced positioning or natural language options will not be parsed.
Usage (UI Builder)
1. Scroll to the Background (or Border) section and tick the "Enable Gradient" checkbox.
2. You are done. Enjoy your gradients.
Usage (USS Stylesheets)
Step 0 is me assuming you have added the stylesheet to your layout (just mentioning it as it's oftern forbotten ;-)
1. In UI Builder (or in your uxml file) select the element you want to add a gradient via USS styles to.
2. Add a USS class name to activate gradient rendering for that element. The names are: kamgam-gradient-bg for backgrounds and/or kamgam-grandient-border for borders. These will let the gradient system know that these elements should be watched.
3. Now you can add a custom style to your USS file (one for borders and one for backgrounds). Example: --kamgam-border-gradient: "linear-gradient(#000000, #F3FD2d)"; for borders or --kamgam-background-background: .. for backgrounds
Usage (Code)
1. Import the Kamgam.UIToolkitGradients namespace. This will give you access to some handy VisualElement extension methods.
2. Call element.SetOrAddBackgroundGradient(gradient); or element.SetOrAddBorderGradient(gradient); to add a gradient to an element.