CSS: iOS-like blurred backgrounds

Fri 20, Sep 2019 CSS webdev

I recently found out about the CSS property backdrop-filter. It's used to apply various filters to backgrounds. This can be really useful in some occasions. After playing around with it, I figured out how to create iOS-like blurred backgrounds using this property. Here's how:

Note: not every browser supports this property currently. Check caniuse to see if your browser supports it!

  1. Set up some basic markup

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>CSS: backdrop-filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="blur">
    <p>Some text</p>
    </div>
    </body>
    </html>
  2. The CSS

Some basic stuff first:

html,
body {
    margin: 0 auto;
    background: url('/path/to/some/background.jpg') no-repeat center center fixed;
    background-size: cover;
}

div#blur {
    font-family: sans-serif;
    margin: 0 auto;
    margin-top: 10px;
    background-color: rgba(234, 234, 234, .25);
    border-radius: 5px;
    padding: 5px;
    max-width: 600px;
    text-align: center;
}

And now add the filters to blur the background of the box:

div#blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

That's it! You should now see a blurred background, just like this: Screenshot of Safari Technology Preview showing the rendered code

A really minimal example of the code above:

body {
    background: url('/path/to/some/background.jpg');
}

div#blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

blur() isn't the only effect possible with backdrop-filter. There are many more:

If you want more information on this property, check its MDN site.


Back to top