How to create blur effect background?

Design help General
1

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

1 Like
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>
4 Likes
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ā€.

1 Like
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

1 Like
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:
    Design Considerations: Text on Images | CSS-Tricks - CSS-Tricks

cheers,
Mike

1 Like
12

I wonder if you can use it with scroll as well
Like Apple did: Apple Music - Apple

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.

1 Like