UI Toolkit Shadows, Outlines & Glow

Links: Manual | Forum

✨ This asset is part of the UI Toolkit Bundle. ✨

Glow, outlines and soft shadows for your UI Toolkit elements.

✔️ Glow & Outlines

Choose two colors and enjoy your glow effect. Choose the same color for both and it's an outline. PLEASE NOTICE: The glow is NOT a BLOOM shader effect (UI Toolkit does not yet support shaders). It's a simple vertex color effect (as shown in the video). *More details below.

✔️ Shadows

If you want real box shadows then you can wrap your elements in the Shadow control. Though you can also emulate shadows pretty fine with the none-destructive glow manipulators.

😎 Non-destructive workflow for glow and outlines

This does not require you to change your existing UI hierarchy. It works with manipulators and thus can be added to any existing UI element. Simply add the component to your UI Document and you are ready to go.

Info: For shadows you will have to use the custom "Shadow" control (more and that below or in the manual).

💫 Animations

Use the animation presets to spice up your UI.

You can also get control over each vertex for full customization (this requires some coding, examples included).

✔️ USS attributes

Control each property with the custom glow attributes.

✔️ Handy Features

* Inherit border colors: Allows you to quickly add outlines matching the border color (and you can tint it too).

* Split glow width: Control the glow width on each side separately (useful for shadow emulation)

* Glow configs and animations are stored in Scriptable Object assets so you can easily copy and reuse them in your projects. This also makes them very easy to modify via script.

📚 Lots of examples & documentation

Check out Kamgam/UIToolkitGlow/Examples.

✔️ Supports URP, HDRP and Built-In

No custom shader. It generates geometry and uses vertex colors.

✔️ Full Source Code

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 (except for the MIT licensed parts, those you can copy). Thank you ❤️

✔️ Supports Unity 2021.3+, 2022, 2023, 2024, ... LTS

It may work with earlier versions too but those are not tested anymore.

👇 Things you should know* 👇

(Read this before you buy)

😲️ This is NOT an uGUI or IMGUI asset. This is for the new UI Toolkit.

😢️ This is (not yet) a fully featured USS BOX SHADOW solution. Unity has announced that they will add these eventually (Source).

⚠️ Since the outline is drawn within the element you will have to set OVERFLOW to VISIBLE or else the outline mesh will be clipped. If you require the overflow to be hidden then please nest a child inside the element for clipping.

⚠️ The glow is NOT a BLOOM shader effect. Sadly UI Toolkit does not yet support custom shaders and therefore we can not add Post-Processing effects to it. The glow in this asset is vertex color based. It will NOT look as nice as a shader based bloom or glow effect. Please take a look at the images and video above, those are taken straight from the Unity demos scenes.

⚠️ Animations are done via vertex animations on the CPU (Unity limitation in UI Toolkit). Take care when animating many elements at the same time. Usually it's not an isse but 'Ye have been warned!'. If you run into any issues please contact support. Maybe we can come up with a custom solution.

⚠️ Unity 2021.3 or higher is required (LTS releases strongly recommended).

* I know some of these limitations are annoying. Most of them are due to missing features in the UI Toolkit. However, UI Toolkit is still under development by Unity and I am sure things will improve over time.

✍️ Usage

Worflow A (custom controls)

1) Add the Glow or Shadow controls to your UI layout

2) Put your content inside.

3) Done

Worflow B (non-destructive)

1) Add a GlowDocument to your UI Document in the scene

2) Configure a new glow config (or reuse an existing one)

3) Set a className (like 'glow-100').

4) Add the class to the list of classes in UI Builder (or your UXML).

5) Done

😎 HINT 1:

You can either use the UI Toolkit Glow component or UI Toolkit Shadow component to wrap your elements OR you use the GlowDocument component on your UI Document which will then allow you to add and remove effects via class names.

🧐 HINT 2:

Use the outer vertices info in OnBeforeMeshWrite to only animate the outer vertices. Also the GlowManipulator has a handy "DisplaceVertexOutwardsNormalized()" method to move vertices along a vector pointing outwards.

🤠 HINT 3:

Use the colors of the shadow to emulate glow on your UI elements.

Use GlowUtils.RegisterToggleClassOnHover() to easily add hover outlines to your elements.

☎️ Support

If you have any questions please write to office[at]kamgam.com. Please be patient, replies may take a few days. Please include your Asset Store Order Nr and the exact Unity version in your request. Please also try upgrading to the most recent LTS version of Unity before asking. Thank you.

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

😲 UI Toolkit Blurred Background

Blurred backgrounds for UI Toolkit.

✨ UI Toolkit Particles

Particle Image for your UI.

😺 UI Toolkit Visual Scripting

Visual Scripting for Unity (formerly B.O.L.T.)

📜 UI Toolkit Scroll View Pro

Infinite scrolling, animations, controller support, ..

✂ Mesh Extractor

Separate your assets into useful parts within seconds.