Design Trend: Blurred Backgrounds in Web Design
Published in GalleriesWhile full-size background images in web design have been increasing in popularity for several years now, another variation of this trend is the blurred background image. Recently it seems that there have been more designs popping up that make used of some type of blurred image for a large background or a full-size background. In some cases selective focus is used on a particular object or person, and in other cases the entire background is blurred.
While a variety of different types of sites use this approach, many of the better designs in this style that I have seen are for web apps or iPhone apps. In this post we’ll showcase 16 examples of this trend for your own design inspiration. See how other designers are using blurred backgrounds to create beautiful web designs, and maybe it will spark some ideas that can be put into practice in your own work.
For more design inspiration please see:
21 Responses
I am seeing more and more of this lately. Adds a really nice effect to designs.
I am personally not a fan of this look. It hurts my eyes to have to look at a webpage with a blurred background. I prefer crisp clean websites with soft or minimal colors
Nice and wonder full effect but it’s too heavy for upload
These website sure look attractive but it also takes forever to load. As a graphic designer I feel less is more and that philosophy I use in almost everything.
Agreed, these websites do really look good and I’ve been seeing this a lot lately, too. Bandwidth might become a problem though like Gordon mentioned. Especially if you care about responsive design or even retina displays. Anyways, it’s a beautiful collection.
Nice collection, love the effect!
These backgrounds look great and put the focus on the foreground content. As for bandwidth, the jpeg quality can be reduced significantly with a blurred image, which would not be possible if the image were not blurred .
Nice and wonder full effect but it’s too heavy for upload
Cem,
Blurred background files can be optimized and saved at a file size that is much smaller than a typical non-blurred background image. It will still add some weight to your page, but not as much as other large photos.
Where can I find pictures like these to buy? I have a hard time finding the right photos to blur to get the right effect.
Any recommendations?
Hi Dan,
I’m not really sure, I’ve never searched for this type of photo before. You could try stock photo sites but my guess is they won’t have these types of photos. You could also try hiring a designer or photographer to create the look you want.
I believe this list is missing http://www.trainsignal.com/
Dan,
We hired a photographer to take ours.
Too “bandwidth heavy”? Change your ISP – all of these loaded in about half a second on my connection, which I’m paying £7.99 a month for and ISN’T that quick!
People whinge and moan about this sort of thing ALL the time, trying to place completely unnecessary restrictions on the creativity of web designers. The fact is that if you optimise these images and ensure they load in the browser in a sensible way, there’s absolutely no reason at all to worry about them.
A prime example is the Rivers & Robots site. As I write this, the background for the site is not loading (a 404 error on the url for the background image). Even though it’s not loading, the site still looks crisp and well designed. The background ADDS to the overall experience but it isn’t necessary! THAT’S the point!
All these unimaginative people saying “less is more” and “images should be kept to a minimum”, etc. etc. etc. are using that as an excuse for their own complete lack of creativity and inability to think of something a little unusual. It bores me to tears and you hear it SO much.
I’m guessing those guys need not apply to any of the decent agencies. I’m not sure 2advanced and the like would be too impressed with their “keep it to text” attitude.
@Piper Lawson – no offence mate but that is AWFUL!!! You are aware that the top of your computer screen image isn’t even level??
I’ve just had a look at the websites of all the guys on here, talking about “less is more”, etc. Oh DEAR!
It’s a bokeh type styling that helps put the focus on the text rather than the photo and provides a sense of depth. I’ve had a blurry background on my own website for around a year. Feel free to drop by, http://www.mikepriebe.ca/ thanks.
Great way to hide how crummy quality your 1900×1080 picture has to be to be under 150k.
Nice and wonder full effect but it’s too heavy for upload……
kişisel gelişim,
Actually the file size of blurred backgrounds is very small in comparison to a regular photo.
Just a note for the link I mentioned above a few months back, I’ve removed my blurry background image as I’m rebuilding my website. Cheers!