UIToolkit Gradient Backgrounds and Borders

Links: Manual | Support via Email

⚠️ 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.

For more details please check out the Manual.

✍️ 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

For more details please check out the Manual.

✍️ 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.

For more details please check out the Manual.

😎 HINT 1:

As always, please read the Manual. It's there for a reason ;-)

🧐 HINT 2:

There are some extra settings under Tools > UI Toolkit Gradients > Settings.

😎 HINT 3:

You can construct your greadient USS styles on the Mozilla website. While not all properties are supported (see manual) you can usually copy the gradient style definition just fine from there.

☎️ Support

Please check the Manual before asking questions. I routinely add new infos to the FAQ secion of it. If you have any questions you can write to office[at]kamgam.com. Please be patient, replies may take a few days.

Please include these infos in your request:

1) Your Asset Store Order Nr (sadly needed to filter out all the pirates)

2) Your exact Unity version (x.y.z.f#).

3) Your exact Asset version (x.y.z).

4) Reproduction steps or a video or a link to your project (whole project zipped).

The more infos I have the faster I can reproduce the problem and the quicker I can give you a proper reply. Thank you for understanding :-)

❤️ If you like this asset then maybe you'll like these too:

🔍 3D Object Image for UI Toolkit

Add character portraits, minimaps, or any other 3D object as an image to your UI.

🧐 UI Toolkit Blurred Background

Blurred scene backgrounds (and more) for your UI.

🏹 Power Pivot

Non-destructive pivot changer & pivot editing tool.

𝄞 UI Toolkit Sound Effects

Easily add sounds to your UI (with reverb settings etc.).

🔑 License Info

This asset requires one license per seat (user who has access to the asset files). If you are a team then please consider buying one seat per Unity user.

Why am I telling you this?

Because most people do not know.

If you have questions about the license then please contact me under office[at]kamgam.com.