Cast shadow around png with transparent background

[r.kugler]

Hi all,

Is there no native way in bubble to drop a shadow around an image that has complex shape and transparent background?

Here an example. I want to cast a shadow around the reddish shape (which is a png, transparent in the upper left corner), not around the frame that contains it:

I tried with images as backgrounds of groups, as backgrounds of shapes and as normal image elements… nothing works.
I know there is a plugin, but it doesn’t have the “spread radius” parameter, which I would prefer to use…

Thanks in advance!

[hergin]

If you are willing to use the HTML element, you can do it with some css with a lot more flexibility. See demo below:

What happens is there is an HTML element that changes the drop-shadow property of the group contains the image. Of course for this to work, your image should be in a container with an ID:

And your HTML element just has this style for this id:

<style>
#myimg {
    filter: drop-shadow(30px 10px 4px #4444dd);
}
</style>

That’s technically it. If you wanna see the editor: Tests for Forum 11 | Bubble Editor

You can use drop-shadow or box-shadow.