Soft shadows - my custom component

Unity Engine
1

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 :slight_smile:

Here’s my Soft Shadows component:

Usage:

Wrap whatever VisualElement should be shadowed with a 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:

Shadow {
    transition: 250ms;
}
Shadow:hover {
    color: white;
}

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:

8232996--1075998--upload_2022-6-25_21-53-34.png

34 Likes
How can I use Shadow on UIToolKit Component
box-shadow Property
How can I use Shadow on UIToolKit Component
Feedback request: Custom Shaders and Post-Processing Filters
2

very nice

3

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

4

nice!

5

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!

6

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

7

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

1 Like
8

Yes, open your .USS file with the button at the bottom of the UI Builder window. Find the VisualElement you want to have the shadow, and just add before and after. Then you can adjust the shadow parameters inside the UI builder.

1 Like
9

@tattyd Thanks for sharing this custom component! Do you think it would be easy to create a shadow for a circular button?

10

Hi, I made some modifications for this script and want to share it.
I made better transition and inner shadow.

ezgif-61482d9fff9fc6

I made a comment for the original post with more details -

My changes -

2 Likes
11

Will it work for rounded objects

12

Yes, you can set radius and radius transition. Just use same radius for inner shadow. In example, it has wide radius for inner shadow than for outer. I’ve made new version what uses USS instead. In original, you need to provide it in constructor.
If you’re asking if it will look good on other visual elements, I don’t tried. But techily, you can use it on any visual element.

ccccccccc
ccccccccc352×468 31.5 KB

xxxxxxxx
xxxxxxxx410×164 20.4 KB

1 Like
13

Incase anyone wants this version, I’ve uploaded a gist. This is supposed to also allow it to act as a “Glow”. I made some changes including:

No background. I wanted to use this on semitransparent stuff.
Constant scaling. Not relative. I wanted to use this on long objects.

image

.glow {
    color: var(--color-light-blue-primary);
    --shadow-transition: 1;
    --shadow-corner-radius: 20;
    --shadow-offset-x: 0;
    --shadow-offset-y: 0;
    --shadow-spread: 10;
    --outer-opacity: 0;
    --inner-opacity: .05;
}
2 Likes