Bokeh Effect in Web Design

  • Inspiration is Contagious
  • Delicious
  • StumbleUpon
  • Digg
  • Designbump
  • Last week I posted 7 Hi-Res Bokeh Textures that I took over the Christmas break. Thus far the post has been very popular and with Bokeh effects blowing up everywhere, I thought I would try to gather some really cool sites that utilize this effect.

    In my browsing, I found that most of these sites use this effect as a background. This effect rarely was ever the main graphic, even though it might be a very obvious element on any page. I also enjoyed finding out the different types of Bokeh, there is the very subtle blurred version, there is also the sharper and more transparent effect. Throughout all of these sites, the Bokeh effect is a very colourful, and beautiful texture, it adds very interesting subtle details to these examples.

    Download 7 Hi-Res Bokeh Textures (22mb zip)

    Inspiration is Contagious
  • Delicious
  • StumbleUpon
  • Digg
  • Designbump

  •  

    Join the discussion

    • January 20, 2010 at 10:28 am

      hey Chad… very nice wrap-up of sites and textures. I will be using one of these trendy textures in an upcoming project! Thanks again.

    • January 20, 2010 at 10:30 am

      Great collection !

      And what about a moving bokeh here : http://nicolasbphoto.fr :)

    • January 20, 2010 at 1:22 pm

      I really like how some of the blurrier effects give depth to the overall composition and make the foreground pop. Nice collection.

    • January 20, 2010 at 3:04 pm

      Really inspiring designs!
      Thanks for sharing it.
      Why not include tutorials for creating bokeh effect?
      May be I will do that!! :)

    • January 20, 2010 at 3:53 pm

      Bit tired of this design trend. It was fun at first, but I’ve seen it so many times that I’m done with it.

    • January 20, 2010 at 6:25 pm

      Thanks for putting together the collection, Chad! Some good examples there. However, while an interesting background can add depth to an otherwise flat page design, that’s the easy part. It’s the stuff in the foreground that gives me the most grief! Yet I’m all for adding more depth to web pages. It’s a web page, after all, not a sheet of paper ;-)

    • January 20, 2010 at 11:05 pm

      This effect generally looks pretty nice, but I see it as just being a trend that may be getting a little long in the tooth. It’s not really something I see standing the test of time.

    • January 21, 2010 at 5:35 am

      what a nice collections of pictures.. i like it…!!
      hey! guys take a look to my collections to:
      my beautiful collections

      Woooooooooow i like it

    • January 21, 2010 at 9:10 am

      Louis – That would be great, thanks for all the great retweets

      Nikhil – That would be great, if you would like to talk about a tutorial on Inspiredology email me muellerchad[at]gmail.com

      Kuldar, Chris – Yes its a trend and it will die out like every other trend, but that’s the beauty of Web Design, trends come and go and it keeps everything fresh.

    • January 22, 2010 at 9:07 am

      Muito bom esse post, segue um link de livros sobre Web Design, http://www.cotacota.com.br/busca2/livro_web-design_99

    • January 23, 2010 at 8:46 am

      That’s cool. I like those sites. I hope one day i will be able to make something like that.

    • January 23, 2010 at 12:56 pm

      Great collection you have there!
      Thanks for including zeemiDesign as well (I designed it) :)

    • January 25, 2010 at 8:13 am

      you can find a wordpress theme with that effect here: http://wordpress.org/extend/themes/cute-bubbles

    • January 27, 2010 at 10:23 am

      Great list. i am using this effect on some of my tutorials too.

    • January 28, 2010 at 3:23 am

      Great collection, Bokeh effect in Web design is pretty and cute.
      If you include tutorials it will be more useful.

    • January 28, 2010 at 1:03 pm

      Thanks for the feature guys….
      My Google Analytics shoot rocket high with this article….

    • March 31, 2010 at 12:25 pm

      I found this website
      http://www.astagramstudios.com
      It’s not much of bokeh effect but they have some.

    • April 17, 2010 at 3:29 am

      I love bokeh effect in web-design very much.

    • September 2, 2010 at 4:46 am

      wow thank you

    92 Trackbacks

    Post a Comment

    Your email is never shared. Required fields are marked *

    *
    *
  • Inspiredology – Design Inspiration Lab
  •