Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

This question already has an answer here:

I'm trying to create a sort sort of semitransparent blur filter image that I can use over some backgrounds on a website. But Photoshop doesn't let me to do so on an empty layer. Is there a work around? Or maybe I could achieve a similar effect in a deferent way?

share|improve this question

marked as duplicate by JohnB Dec 23 '13 at 1:35

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

up vote 3 down vote accepted

Simply put, you can't blur an empty layer. It has never been possible blur what is not there. Blur interacts with existing pixels to create a dispersion effect of those pixels resulting in the blur.

You could convert images to smart objects then use smart filters in order to retain the sharp version. Then simply edit the smart object contents to alter the base image. But there's no way to save "just the blur" without an image.

Most web sites that are using blurred backgrounds either blur the image itself or apply Cascading Style Sheet (CSS) filters to the image so the CSS does the blurring.

Simply add a class the image:

<img src="path/to/img.jpg" width="100" height="100" border="0" alt="image" class="blur" />

Then create the CSS rule for blurring:

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

You can see a live demo here: jsFiddle

Be aware that this requires CSS3 and will not work with older browsers. This site claims their method works across browsers, but I haven't tried it myself.

And you should also note that CSS blurring can take a quite a toll on page load time.

share|improve this answer
caniuse is a good place to check browser compatibility for these types of things. – Johannes Dec 22 '13 at 18:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.