Line25

Web Design Trend Showcase: Blurred Backgrounds

Read the full post

Along with large background photos in general, blurred background images are becoming increasingly popular in web design. The addition of the blur not only creates a cool effect, it also puts focus on the main content, avoiding any legibility problems than can occur when text is overlaid over a detailed image. This post rounds up a collection of great looking website designs all sporting a blurry background.

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

IdeaKites

View the website

Space Box

View the website

Flock

View the website

Color

View the website

Hipstamatic

View the website

NOE Interactive

View the website

GatherContent

View the website

Humaan

View the website

Cage

View the website

Square

View the website

Meernotes

View the website

instafocus

View the website

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

24 Comments

  1. James Deer says:

    Thanks for mentioning us Chris!

  2. 95% of the websites are with a big image of a smartphone on their homepage. This is a little bit strange.

    Though they are really good looking websites!

  3. Yes these sites are really cool with blur background….

  4. chris r says:

    I just want to thank you because as a banner image for my own website I never even thought of using a blurred background with a picture focused in front of it and it look amazing.
    Thanks again

  5. Gavin says:

    Interesting style, but terrible branding. They all look the same, or at least similar enough to be a problem.

  6. And here are some blurred backgrounds for anyone who wants to follow this trend: http://graphicriver.net/item/blur-deluxe-blurred-hd-backgrounds/2862970?ref=Alter

  7. Brad Potter says:

    I think blurred backgrounds are a great idea, but It's not something I would use all the time on my designed websites. Versatility is a feature that needs to be considered.

  8. Each of them has its own style.

  9. Joseph Sado says:

    Good technique, and your attention goes directly to main content.

  10. @Chris Spooner all the given website are looking really awesome, as usually your articles are. But it would be great if you provide some information about to implement this background image without taking much load time on the website. Thanks a lot ;)

  11. iWeb Expert says:

    The designs are so cool and amazing! I never thought that blurry backgrounds can have awesome effect it seems real.

  12. This would work for a Facebook cover photo, too.

  13. Absolutely love these designs, blurred backgrounds are absolutely awesome. Have a look at the Flock site above, it has been redesigned so now longer has the blurriness, but uses some great HTML5 and JQuery.

  14. Thank you for posting such a beautiful blog , i like this blog,This blog give more info about the topic.

  15. Absolutely awesome designs, I'll take inspiration and see if I can use a couple blurred backgrounds on http://www.reynoldsdigital.com projects in the next few weeks. Exciting stuff, thanks Chris!

  16. Those are inspirational designs and i will share it with my designer friends on my social networks. The best blurry background which i like is "Tiny Factory".

  17. Citivine is a leading web designing firm offering web design, web development, animated videos and all inclusive website marketing solutions for their customers of Ottawa, Gatineau and other nearby regions of Canada.

  18. Andy Web says:

    We used tiny factory previously to create the blurry background effects on images and this set of show cases is the reason why the effect is so cool.

  19. azhar says:

    The designs look great with blurred background, i guess its only applicable websites with less content. If we need to display more content in site, i feel the background effect may is not so great.

Sorry, comments are now closed