Is it possible to add a drop shadow on a vector image that fits the borders?

Hi! I’m trying to apply a shadow on a vector image to animate it after, but I would like that the shadow fits the borders of my title, is there a way to do it? My image is actually in PNG with a transparent background.

Here is the link to view my image :

It’s not possible in Hype, but you can still do it using CSS:

<style>
.shadowfilter {
	-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
	filter: url(shadow.svg#drop-shadow);
}
</style>

2 Likes

Oh thanks a lot, I’m really pleased to know this new trick. But would it be possible to animate it, like make it bigger and bigger, add blurred and make it disappear afterward?!

Maybe you could duplicate it and then apply the filters in Hype (note they are not supported fully)

And animate the copy.

btw, the filters I’ve applied are Brightness->0%, Contrast->0.0 and Blur->6.4px

Of course you can adjust to whatever you need

3 Likes

Super, great idea! Thanks a lot!!

I’ve copy and paste your code in the intern HTML code of my element but I don’t see the drop-shadow under my title even if I previews in Hype, Chrome or Firefox

Make sure you entered the proper class name in the Identity inspector.

1 Like

I have never thought of it and never applied a CSS class to Hype, now I know How and I’m very happy, thanks a lot!