Shadow, glow and filters Pro

UI Toolkit has no box-shadow. Cascade Pro adds a drop shadow and glow element drawn with a mesh, and on Unity 6.3 and later it animates the USS filter blur and tint.

Drop shadow

DropShadowElement draws a soft shadow behind its children. Put the element you want shadowed inside it.

using Cascade;

var shadow = new DropShadowElement
{
    shadowColor = new Color(0f, 0f, 0f, 0.5f),
    blur = 22f,      // how far the edge fades, in pixels
    spread = 2f,     // grows the shadow before the fade
    offsetY = 12f,   // pushes it down, like light from above
};
shadow.style.width = 110;
shadow.style.height = 90;
shadow.Add(card);

It is also a UXML element, so you can add it to a layout in UI Builder and set its color, blur, spread and offsets there.

Glow

A glow is the same element with no offset and a bright color:

var glow = new DropShadowElement { shadowColor = new Color(1f, 0.6f, 0.2f, 0.8f), blur = 18f, spread = 4f, offsetY = 0f };
glow.Add(rewardIcon);

It's mesh-drawn: no shaders and any render pipeline. Each one costs an extra draw, which is fine for a few hero cards and buttons, not for every row of a long list.

Animated blur and tint (Unity 6.3+)

Unity 6.3 added a filter property to UI Toolkit. Cascade animates two of its functions as verbs:

background.Animate().BlurTo(8f, 0.3f).Ease(Ease.OutCubic);              // blur radius in pixels
icon.Animate().TintTo(new Color(1f, 0.4f, 0.4f), 0.2f);                 // flash red

Other filter functions already on the element are kept. A filter re-renders the element every frame it animates, so measure it on your target devices. On Unity versions before 6.3 these verbs compile and do nothing, with a single console warning, so shared code stays portable.