How to create a non-destructive and reusable blurred/frosted glass effect?

How can I create a generic blurred background that can be used on multiple images similar to the example below?

I need a white frosted glass looking png that I can set use to layer over regular images to give them all a frosted glass look (like you can almost make out whats behind it; maybe some colors).


Example blurred image
Click on image for full resolution

enter image description here

Maybe a white background with texture (grainy texture) then Gaussian blur that and then use it as a layer over all my images.

I know the link I posted above is probably just an image blurred, but I need a layer that can be reused in an iOS project. This way it can be used a view layer over sections of an image and make the image underneath look blurred. Maybe I shouldn’t use blur as the term here. I am looking for frosted glass look.

What I am trying to do with this image is import it to my iOS app use it a view background. Then when this view is over other views (a map view, a photo, etc…) they all are frosted. I am trying to create the effect of this image from iOS 7. And no I don’t want to use the new iOS 7 design features, because most of my users are on iOS 5 still. And no I don’t want to force them to upgrade.


You can’t just overlay a ‘blurry’ image that blurs the random image behind it. The blur effect needs to sample the image behind to transpose/spread the pixels, so it needs to be applied there.

You can however make a sandy/grainy texture and use it as a multiply layer to get the grainy texture look.

Update – As Derek suggests in another answer, you can make a non-destructive blur by converting your image layer to a smart object, then apply the blur to that. You can then enter the smart object and edit that independently of the blur.

Source : Link , Question Author : jgervin , Answer Author : John

Leave a Comment