How to Create Blurred Background in CSS

Have you ever noticed on some websites, that the background of a page is blurred and the background of an element, be it header for example changes as you scroll?

iOS 14 Preview – Apple.com – Beautiful blurred header

Apple has recently released its new iOS 14 and also they created this gorgeous website presenting the new operating system for iPhones.

As you scroll, you might notice that the background of the header changes, as if the header would have a transparent white background, which you can accomplish with rgba or hsla colors.

But there is something different, it’s also blurred.

CSS filter property

Many of us already know this useful css property called filter.

Not only you can:

But as you already know, using filter: blur() results in blurring the very content of the element, the property is used on, so how did they accomplish that effect?

CSS backdrop-filter property

As opposed to filter property, backdrop-filter lets you apply graphical effects on the elements behind the target element, isn’t that magnificat? 😍

Backdrop-filter gives you a possibility of applying that can be accomplished on the element itself, apply on the element behind it — and if you’ve seen what apple accomplished, you can not be more stunned as I was.

Browser Support

Do you even care bro? 😀

In front-end development world we’ve sort of got used to, that newly implemented features are firstly available on Google Chrome browsers.

However, currently by July 2020, we can enjoy using backdrop-filter on

  • both, Safari ios/mac
  • Google Chrome
  • MS EDGE (really, not a joke!)
  • and also for people born in 90s, on Opera 😂

Firefox is sadly, ignoring this marvelous CSS property 😔 .

Example

You can really go to apple.com and check out the code via web inspector yourself, but if you really insist, I will past it here for you:

    background-color: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-transition-property: background-color, -webkit-backdrop-filter;
    transition-property: background-color, -webkit-backdrop-filter;
    transition-property: background-color, backdrop-filter;
    transition-property: background-color, backdrop-filter, -webkit-backdrop-filter;

Additional links

Follow me:

Useless keywords summing up the article so I will rank higher in Google:

  • css
  • html
  • apple
  • ios
  • iphone
  • effects
  • filter
  • backdrop-filter