This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Oscar Alonso
Posted Aug 27 - Read on Facebook

Does anyone know if it is possible to have a layer mask with blurred edges? Thanks!

9 Comments

Jordan Robert Dobson

It's possible I think... By blurred edges do you mean like a gradient where the mask transitions from 100% to 0% or actually where it gets blurry as it fades out.

Javier Chávarri
Jordan Robert Dobson

But yes either of things I mentioned are possible.

Oscar Alonso

I meant the first one, Jordan Robert Dobson: an opacity gradient in the edges so the content is gradually revealed. Got any ideas about how to get that to work?

Javier, thanks, but that's not what I am looking for, as Jordan explained more clearly what I actually want is an opacity gradient.

Jordan Robert Dobson

How's your CSS skills?

Jordan Robert Dobson

Basically you want to create a radial gradient (via image or CSS) and use that as a WebKit mask on your content. You also apply the mask via CSS.

Jordan Robert Dobson

Oscar I can give you a quick demo if you wanted. It's been a while... Just let me know... Or you can dig in yourself.

Javier Chávarri

I see... As Jordan Robert Dobson says, it's possible with some CSS. I created an example in Framer from this website http://share.framerjs.com/09srwqoqf4r3/ https://www.webkit.org/blog/181/css-masks/

Jordan Robert Dobson

Yep... it's crazy this stuff has been around for a long time. I think I started expirementing with this back in 2008!

Read the entire post on Facebook