How to create a frosted glass effect using CSS?

68,446

Solution 1

CSS

CSS 3 has a blur filter (only webkit at the moment Nov 2014):

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9 supports a non-standard filter

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

See some nice demo for the blur and other filters here.

webkit CSS filter blur example

For future reference here is the compatibility table for CSS filter. Firefox seems to be getting the feature in v35+ while even IE11 does not seem to have any compatibility.

SVG

An alternative is using svg (safe for basically IE9 and up):

filter: url(blur.svg#blur);

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 

jsFiddle Demo

Javascript

You will achieve the highest browser compatibility with javascript, but usually the slowest performance and added complexity to your js.

Solution 2

You can use CSS image filter.

-webkit-filter: blur(2px);
filter        : blur(2px);

More info on CSS image filters:

Demo: JSFIDDLE Blur filter exemple


But in fact, they are using pre processed JPG, and just using it as a overlay in the correct position.

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

Demo: JSFIDDLE CSS blur technique

Solution 3

You made me want to try, so I did, check out the example here:

http://codepen.io/Edo_B/pen/cLbrt

Using:

  1. HW Accelerated CSS filters
  2. JS for class assigning and arrow key events
  3. Images CSS Clip property

That's it.

I also believe this could be done dynamically for any screen if using canvas to copy the current dom and blurring it.

Solution 4

This should be coming browsers in the future as a CSS filter called backdrop-filter. There's virtually no support for it at all currently. For browser support see: http://caniuse.com/#feat=css-backdrop-filter

This CSS filter will do the frosted glass without any funny business, or hacks. It'll just do it.

Someone recorded a demo of it on Vine, and it looks really good. They were using Safari nightly to get access to the CSS filter. https://vine.co/v/OxmjlxdxKxl

Solution 5

Just put the same image (or parts of it) with opacity .9 a few pixels left/right/up/down - voilà

Share:
68,446
Admin
Author by

Admin

Updated on July 09, 2022

Comments

  • Admin
    Admin almost 2 years

    I'd like to create a div that is fixed in one position and make it translucent - making the contents behind it partially visible and blurred. The style I'm looking for is similar to the div of the 'See All' thumbnails in the Apple website.

    The only thing I can do is adjust opacity: 0.9 but I cannot blur the contents that go under the div.

    Note: The div has a fixed position and the background scrolls. The background that scolls is a mix of text and photos.