I’ve seen this large background/blurred image effect on several sites. It’s a good look! When done right it’s very sharp. Some might even consider this background effect a nice website design trend.

I am working on two websites where I might use just such an effect. I’ve broken down the effect for you here step by step using Photoshop. Some might use an photo as is with a shallow depth of field, but for our purposes, we are going to take a perfectly good image and specifically blur for use as a background.

Select your image and set your dimensions

In our example, we want a background image for our website that will go behind the site navigation and behind a rotating effect of some sort. For that we are going to need something wide and short. I am setting my document to 1200×650. I am also using this awesome image from Photodune.net. I like it because it has some props that will be recognizable once it’s blurred, but also because the neutral tones will look nice with most color schemes. In Photoshop go to File>Place and select the image you want to use. Re-size the image to fit your document dimensions. You should now have a background layer and another layer on top of that with your image.

Copy your image layer and strategically blur

No sir, you won’t find Gaussian Blur around here! With your image layer selected, duplicate your image layer by going to the menu item Layer>New>Layer Via Copy. I renamed this new layer blurred-image to avoid confusion in a moment. Now with my blurred-image layer selected go to the Filter menu and select Filter>Blur>Lens Blur. Once the Lens Blur window loads I use these settings for this particular image. (see screenshot below)
3

It’s time to bring it all together with opacity settings

Fill your background layer with black or any very dark color. Change your original un-blurred image layer opacity to 50%. You can do this in the layers panel or by hitting the number 5 on your keyboard with that layer and the Move tool selected. For your blurred image layer we are going to add a layer mask using the Add layer mask icon at the bottom of the layers panel. With the gradient tool and our layer mask selected we are going to choose the Reflected Gradient option near the top menu. Make sure you have the Foreground to Background gradient selected. It should look like a fade from white on the left to black on the right. Press the D key to change your Foreground and Background colors to white and black. Now hit the number 3 on your keyboard or set your gradient opacity to 30%. Again this option is near the top menu. Click in the center of your image and drag once. This gives us a subtle vignetted effect on our image edges. And we’re all done. Download my finished Photoshop document to see the layers as we’ve edited them.