Streaming live at 10am (PST)

How to create blur effect background?


#1

i wonder how to create blur effect such as ios7? not opacity.


#2

only option i see is photoshop


#3

You can put this one in the Custom Code section in the site dashboard in the second field before </body>.

<style>
  .datclassss {
    filter: blur(5px);
    // Browser Specific
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
  }
</style>

#6

So I've been trying this and I feel stupid because it's not working. I literally copied the code, but it in the custom code and then changed .datclassss to my class which is .backgroundimage and it's just not blurring anything. Any insight would be appreciated.


#8

I would love to use this but cant get it to work? Is it possible to tell a bit more?

Dan


#9

mine is working.

<style>
.blur {    
    -webkit-filter: blur(10px); 
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}
</style>

to name the class "blur".


#10

Hey ZFE, thanks for the reply. Perhaps what I want is not right, please let me explain. When I use your code that works, but what I was hoping to do was to have a background image and then a div that sits infront of it and blur's only where that div is. I don't want the entire background imaged blurred. Is this possible? I've tried it with a blank div, but couldn't get it to work, so I added a fill colour, still didn't work, tried uploading a transparent png into the div to blur it and that didn't work either.

Any help would be appreciated. Cheers, Michael


#11

i know this is old, but I found two things regarding this...
1) apparently order matters, I mostly use Chrome and I couldn't get Blur to work unless -webkit was first and/or plain 'filter' was last.
2) background image with blurred div, here's a link that I'm sure fits the bill:
https://css-tricks.com/design-considerations-text-images/

cheers,
Mike


#12

I wonder if you can use it with scroll as well
Like Apple did: http://www.apple.com/music/


#13

try backdrop filter:

<style>
.blur {    
   background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: brightness(1.5) blur(4px);
}
</style>

so far, backdrop filter only works for safari.


#14