Design Trend: Blurred Backgrounds in Web Design

While 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.

Do

Do

Cage

Cage

Pulse

Pulse

Hipstamatic

Hipstamatic

Square

Square

Rivers & Robots

Rivers & Robots

Humaan

Humaan

Givers

Givers

Daniel Filler

Daniel Filler

HappyTables

HappyTables

NOE Interactive

NOE Interactive

Découvrez uOttawa

Découvrez uOttawa

Stieler

Stieler

WthrApp

WthrApp

Site 2 WordPress

Site 2 WordPress

Mambo Industries

Mambo Industries

turningArt

turningArt

For more design inspiration please see:

Published September 19th, 2012 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

21 Responses

Comments are now closed on this post.

  • Chase Sagum, September 21, 2012

    I am seeing more and more of this lately. Adds a really nice effect to designs.

  • Carmen Brodeur, September 24, 2012

    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

  • Adam Johnson, September 25, 2012

    Nice and wonder full effect but it’s too heavy for upload

  • Gordon White, September 29, 2012

    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.

  • Dan Bakan, October 8, 2012

    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.

  • Marco Rodriguez, October 9, 2012

    Nice collection, love the effect!

  • Steven Lienhard, December 27, 2012

    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 .

  • cem aslan, January 5, 2013

    Nice and wonder full effect but it’s too heavy for upload

    • Steven Snell, January 7, 2013

      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.

  • dan, February 19, 2013

    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?

    • Steven Snell, February 19, 2013

      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.

  • Piper Lawson, February 19, 2013

    I believe this list is missing http://www.trainsignal.com/
    :)

  • Piper Lawson, February 19, 2013

    Dan,

    We hired a photographer to take ours.

  • Luke, February 21, 2013

    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.

  • Luke, February 21, 2013

    @Piper Lawson – no offence mate but that is AWFUL!!! You are aware that the top of your computer screen image isn’t even level??

  • Luke, February 21, 2013

    I’ve just had a look at the websites of all the guys on here, talking about “less is more”, etc. Oh DEAR!

  • Mike Priebe, March 1, 2013

    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.

  • kevin ward, April 10, 2013

    Great way to hide how crummy quality your 1900×1080 picture has to be to be under 150k.

  • kişisel gelişim, May 13, 2013

    Nice and wonder full effect but it’s too heavy for upload……

    • Steven Snell, May 14, 2013

      kişisel gelişim,
      Actually the file size of blurred backgrounds is very small in comparison to a regular photo.

  • Mike Priebe, June 13, 2013

    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!