Image Opacity Gradient

I’m looking to have a linear gradient that makes an image go from 100% opacity to 0% opacity. The desired effect would be outlined as such down below:

-webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

Currently I haven’t been able to format this in Webflow. Is this code I’ll have to manually add, or is there supporting functionality for this?

Masking an element with mask-image is not currently supported in the designer. It is experimental and browser support is spotty. You would need to use custom code.

Appreciate the response Jeff. Makes sense!

Hey Jeff and Webflow team!

Is this still the case? Hoping it’s been implemented at some point in the last 3 years :grimacing:

Thank you!

@Keith_Murray - Take a look at Responsive SVG Clipping Mask on Image - Community resources / Webflow Tips - Forum | Webflow

Hmmm… thanks that might be helpful in the future. Not exactly what I’m looking for though. I want my hero image to start with a strong 100% opacity at the top and fade to 0% to blend it in to the background color