Background Blur Effect / Frosted Glass Effect - CSS

Question

Background Blur Effect / Frosted Glass Effect - CSS

How do I make a background blur effect or a frosted glass effect like in iOS? I understand that you can add a filter to the image.. but how do I add this filter to a separate layer and overlay this layer on top of the nth number of images??

4

css веб-дизайн

Author: cmd, 2015-05-26

Source

1 answers

score 17 · Accepted Answer

Use filter: blur(5px);, below is an example.

img {
    width: 300px;
}

.blur {
  -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
       -o-filter: blur(5px);
      -ms-filter: blur(5px);
          filter: blur(5px);
}

<div>
    <img src="http://www.subaruwrx.net/images/2006-sti-rb320-lg1.jpg" alt="" />
</div>
<div class="blur">
    <img src="http://www.subaruwrx.net/images/2006-sti-rb320-lg1.jpg" alt="" />
</div>