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

> http://share.framerjs.com/qg7r7iom5zc1/

6 Comments

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"
navbarBlur.style["-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)"

Antonio Reyna

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 @dockView.style["-webkit-backdrop-filter"] = "blur(30px)"

Read the entire post on Facebook