True blurring within the web browser.

iOS Background Blur in Framer JS

True blur effects in the browser

After Apple released iOS 7, I don’t know a single web designer or front end developer who didn’t try or bemoan the lack of support of background blur within web browsers.

Then I saw Andreas Wahlstrom’s example of using Framer with the edge release of Webkit.

Blurry. Hack-free. And perfect for prototyping. Finally.

Here’s how to do it

1. Add a background blur to a layer in your Framer file: =
'-webkit-backdrop-filter': 'blur(30px)'

2. Because the Framer simulator doesn’t run on Nightly, you’ll have to run the prototype outside of Framer Studio. Download the latest version of Webkit Nightly (the latest build of the Webkit/Safari browser). To ensure the framer file loads consistently, turn off caching and disable local file restrictions in the “Develop” tab (you can enable this by going to Safari > preferences > advanced > enable develop tab).

Update (8.24.15): John Anthony Evans brought it to my attention that iOS 9 Safari now supports blur as well, which means running a prototype on your iPhone will soon support blur. The future is bright.

3. Open the index file of your framer document in Webkit Nightly and enjoy that frosted goodness.

Here’s the code I used in my example:

storyActionsLayers = Framer.Importer.load 'imported/Story Actions'
blur = new Layer
width: 500
height: 500
backgroundColor: 'rgba(255, 255, 255, 0.4)'
blur.draggable = true =
'-webkit-backdrop-filter': 'blur(30px)'

Thanks to Brian Lovin for making edits to this piece.

Like what you read? Give Jeff Smith a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.