Soft shadows - my custom component

Hey all,

Like many others, I was in need of a soft shadow for some of my elements in UI Toolkit. I decided this was a good time to learn about OnGenerateVisualContent

Here's my Soft Shadows component:

https://gist.github.com/tattyd/6807d6be9e550a1f24ad17f21d69177e

Usage:

Wrap whatever VisualElement should be shadowed with a <Shadow></Shadow> component.

Control shadow colour using the USS color style property (shows as 'text color' in the editor). This allows you to do fun mouseover effects, as well as transitions:

Code (CSharp):

1. Shadow {
2.     transition: 250ms;
3. }
4. Shadow:hover {
5.     color: white;
6. }

Attributes:

• shadow-corner-radius controls the corner radius, although in practice it feels more like controlling the blurryness.
• shadow-scale allows you to scale the shadow up/down to alter how far it renders from the contents.
• shadow-offset-x and shadow-offset-y allow you to move the shadow around, e.g. to simulate light coming from a specific direction.

Hope it's useful to somebody!

Sample:

 

very nice

 

Thanks, that great! I´m gonna test it immediately.

 

nice!

 

This does work well, though for anyone looking at this, it does not conform to the shape of the texture, so if you just want a circular or squared background effect, this can work very well!

 

That is really nice amaizing
but i am not able to controll attributes in uss but i can in the inspector
i tryied using class id and dirrect element but it didn't work in uss

 

I am new to unity and ui toolkit is like an alien to me. what does this mean? "wrap around" do i have to go in uxml file or some other thing