How to blur transparent video overlay while keeping converted outlines clear?

[Chad_Ostergren]

Hello webflow-ers,

Does anyone know how to add a video background blur to a transparent background while keeping converted outlines clear?

Attaching link below!

Let me know if you have any questions:)

---

Here is my public share link: https://preview.webflow.com/preview/go-green-armour-splash-make-it-378cf8?preview=51397e64a062120a72b25ad2dfea351f
(how to access public share link)

[DFink (Dave)]

What do you mean by converted outlines?

[Chad_Ostergren]

I exported an overlay .png in sketch app. The overlay is light opacity with a blur background - the letters “Go Green Armour” are converted outlines - meaning that they are cut outs of the overlay (inversed mask) so you can see through the letters.

Does this answer your question?

[DFink (Dave)]

I see, then you have 2 options. Blur your source video before you upload. Or you can use the blur filter but then you’ll have to put the video inside a div wrapper and also put the image inside that wrapper as well. Set the wrapper to position relative and set the overlay to position absolute: full Then apply the blur to only the video element and it should not affect the overlay. Honestly after effects on the video itself is the best way to do this. I think you’ll find that once you blur the background video, it won’t look right.

You could also get a similar effect by making your overlay dark with your video regular and creating the text that will get knocked out using this https://codepen.io/crismanNoble/pen/bGzqu Though that will not unblur the video if that’s what you’re after.