How to create blur on an empty layer in Photoshop?

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?

Answer

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:

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.