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

What is Framer? Join the Community
Return to index
Ray Yip
Posted Mar 12 - Read on Facebook

Just playing around with Safari's new feature: Backdrop Blur



Brandon Souba


Koen Bok

Performance is pretty great!

Benjamin Den Boer

Really cool.

Daniel Plunkett

Awesome. Any idea how the change the color of the blurred element? Because when I apply a background color it kills the blur effect.

Jordan Robert Dobson

You could try using background-blend-mode and a background color?

Daniel Plunkett

Well the fix I came up with was to create the blur as a superLayer and then insert whatever color I wanted as a sublayer. Perhaps not the cleanest fix but it works exactly as I would want. Here's an example recreating iOS navigation bar:

navbarBlur = new Layer
width: 640
height: 96
shadowY: 1
backgroundColor: "transparent"["-webkit-backdrop-filter"] = "blur(10px)"

navbar = new Layer
superLayer: navbarBlur
width: 640
height: 96
shadowY: 1
backgroundColor: "#FFFFFF"
opacity: .8
shadowColor: "rgba(0,0,0,.1)"

Jose Antonio Reyna Fuentes

hello, I am trying to add some blur to the background but it does not work, just works when i hover the element in the elements tree, what could be happening? i am using["-webkit-backdrop-filter"] = "blur(30px)"

Read the entire post on Facebook