Drop shadow and Outline for images

Help & Support
1

Is there a way to get drop shadow and outline for Images on a 2D screen, similar to what we have for text elements?

2

Hi @Ashish_Rana,

Sadly no that’s not possible for PlayCanvas UI images. For drop shadow you can use a second image, rendered behind the normal one with a small offset (and a black tint / opacity).

For outlines you can try the same trick (a second image scaled up), but for more elaborate effects you will have to use a custom shader.

Otherwise if that fits your project you can use HTML/CSS (css filter property), here is an example: html - CSS Border on PNG image with transparent parts - Stack Overflow

1 Like
3

Thanx for the reply @Leonidas, offsetting the image trick sounds good

1 Like