Bokeh Effect in Web Design: 30 Excellent Examples and Tutorials
Unless you’ve been living under a rock for the past year or so, I am sure everyone is aware of the Bokeh effect. This article will showcase the Bokeh effect in web design from bright and bold backgrounds to the subtle black and white. Some even go as far as to make the Bokeh effect animated, which looks really awesome. :)
The thing that struck me was that I could remember (or so I thought) seeing a lot of website designs that utilized this effect, yet when I actually went scouring the web for them – there really weren’t that many. I hope you enjoy them and find some inspiration through them.
Frisk Design ↓
Sebcreation ↓
Squarespace ↓
Vogue ↓
Designed by Dave ↓
Newism ↓
Designphunk ↓
Crush Lovely ↓
Portable Light ↓
Lisa Maya ↓
Webunder ↓
Tierra Virtual ↓
KLAR ↓
Sattom Media ↓
Shawn Leslie ↓
Envato ↓
Zeemi Design ↓
72 Thinking ↓
Bravura ↓
Moonit ↓
PSD 2 Ecommerce ↓
Masérnicka ↓
RiteBrainr ↓
Onvo Media ↓
Constantin Potorac ↓
Roxanne Labajo ↓
DIV Playes ↓
Traffik ↓
Eighty8Four ↓
Unuidesign ↓
Want to make your own Bokeh Design?
Below are links to two tutorials from the awesome Abduzeedo website that show you how to make this effect in both pixelmator and photoshop. The process is actually pretty simple and it turns out some really great results for web designs.
And for those of you DIY-ers interested in creating this effect manually:
What do you think? You think the bokeh effect is overused or one that could be utilized a bit more in the future? Let us know in the comments.
70-642 sample questions by testking provide you exact review of real exam so that you can easily pass your 220-701 and 640-822 exams.
About the author:
Mike Smith releases wordpress themes on a regular basis and is also a blog designer at Guerrilla.
jump to the comment form ↓
December 6th, 2009
It must be my photography background but I love bokeh in web design. Something about it just makes me happy. Good post.
December 6th, 2009
I recently completed my website and attempted to use this effect, I’m not that great at it just yet, I need a bit more practice!
December 6th, 2009
I recently completed my website and attempted to use this effect, I’m not that great at it just yet, I need a bit more practice! http://www.pixelpleasure.co.za/
December 6th, 2009
Nice collection of Bokeh website designs – my favourite is the Envato design. We also used this style on a recent redesign for Piccadilly Backpackers ( http://www.piccadillyhotel.net )
December 6th, 2009
great collection, thank you.
December 6th, 2009
Found another example: http://new-startups.com/
December 6th, 2009
Awesome collection! Sephora is using the Bokeh effect right now too for their Sephora Claus giveaway website: http://www.sephoraclaus.com/
December 6th, 2009
I really like the effect, i think it’s awesome, however i’ve noticed that without ALOT of attention to detail it’s hard to stand out from another site using the same effect.
December 6th, 2009
Great collection! Love this effect.
December 6th, 2009
@Josh – I like your site design. the wood seems a bit out of place, but other than that, it’s a really clean design. I like it.
@Leon – I like that design and I love the fact that you have the bg stationary when scrolling. Nice job.
@Jay & Sara – thanks for the links. Always love looking at more sites like that.
@Everyone else – Thanks for the comments :) Glad you guys/girls liked the post.
December 6th, 2009
Excellent Collection….
December 6th, 2009
Thank you for the feedback, I’ve been thinking the same thing, I will try something different!
December 6th, 2009
I was expecting to see makephotoshopfaster.com on that list somewhere.
December 7th, 2009
I saw this link on twitter and was hoping I’d see my portfolio listed here and was pleased to see that it was! Great list and thanks for the recognition!
December 7th, 2009
How about this site. Its a very simple website but we used this effect to get some kind of additional design effect for the same.
http://www.forefrontchurch.org.uk/
Sathish Sampath
December 7th, 2009
I happen to drop by this page from a link in SM. Really love this design show case so I guess I’ll be visiting this site again fairly often. Keep up the good job!! :]
December 7th, 2009
Also another one ===> http://www.headup.com
try changing your browser’s width
December 7th, 2009
I didn’t know of the Bokee-effect. Thanks for sharing and enlighten me. :)
I love the oink one with the “K”. That’s also the picture, that catched my eye on Smashing Mag and send me here to investegate that “Bokee-effect” ;)
December 7th, 2009
hi Saram thx for the
http://www.sephoraclaus.com/ realy nice ….
thanks
Mohamed rafi.B
December 7th, 2009
inspiring collection of websites….thanks
December 7th, 2009
Bokeh when used innovatively can produce amazing output and this becomes obvious in the pictures above.
Colors, shade and effects around it comes out so fantastic that it seems more than real sometimes which is worth the effort :)
I particularly liked the friskdesign one, it is so attractive !
December 7th, 2009
Maybe My site can make the next list like this one :) … Thanks for the post!!
December 7th, 2009
Great use of boken effect. Love this collection
December 7th, 2009
I didn’t realise this effect had a name. Thanks for sharing.
December 7th, 2009
Here is another example : http://www.nanetteworkman.com/
December 7th, 2009
A new term today in the work of web development. cheers.
December 7th, 2009
Great examples. Thanks for sharing.
December 7th, 2009
@ Sathish Sampath
I thought I recognised that Bokeh from somewhere, I minimised my browser and BAM there it was! It’s my desktop background which I downloaded from Deviant Art….. http://-kol.deviantart.com/art/Bokeh-116165739 it is one of the wallpapers in the download pack…..
I’m not sure if the artist gave you permission to use it but either way you should at least give the artist credit.
December 8th, 2009
Really beautiful collection – thanks!
December 8th, 2009
No time to read up to see if it’s already been posted, but one of tumblr’s themes uses bokeh!
http://safe.tumblr.com/theme/preview/979
December 8th, 2009
Obviously I’m living under a rock. Guess what: I do NOT need to have to know anything and everything that happens on the web ;)
Alas, still a nice looking thing, but nothing totally new. o2 is using that style for their CI for years now – and in the 70s, this kind of design pattern was rather loved.
cu, w0lf.
December 8th, 2009
I think this style of imagery is fantastic, it adds great colour to our format. However, there are examples here where it just doesn’t seem to work in context which makes a strange, instant semiotics clash in my head without even analysing the website properly.
December 8th, 2009
It’s getting really popular, I see
December 9th, 2009
Nice list, made me think about this one : http://www.charliegentle.co.uk/
December 10th, 2009
Great collection…I impress…..You give best design.i like your picture so much to make good web design.thanks
December 10th, 2009
Here’s another good one:
http://www.razoo.com/
December 11th, 2009
Great collection, I am a big fan of this effect.
Keep up the good work.
December 13th, 2009
really awessome effects. great exemples but where are the tutorials?? i cant’t find them!
December 17th, 2009
Cool post thanks for all the sites, is this not getting cliched to use? but as you say quite hard to find them, guess that’s just perception vs reality!
January 16th, 2010
Yes, it became a trend unfortunatelly…
January 21st, 2010
awesome list! however, Bokeh is getting WAY over used at this point. Design trends are silly and show a lack of original creativity imo. Thanks for doing the leg work on this one though!
February 5th, 2010
Nice collection! Man I am a fan of your site now !
April 28th, 2010
Thanks Mike for sharing such a wonderful collection :)
April 30th, 2010
I think this effect was awsome, but now it’s a litlle bit overused. I’ve used it in some designs and I have seen it in many others (great colection u have here) and my conclusion is that the better way to continue using it is in a moderate way, like this example that u posted:
http://newism.com.au/
There, the effect is much blur than others. I like it.
Thanks for the post. Jon Rivas.
May 6th, 2010
Good collection for inspiration!
May 24th, 2010
Excellent showcase !
July 12th, 2010
Great collection of designs. These could really help on choosing the best web design. Personally I still help from professional. Will this be easier for beginners?
July 19th, 2010
Outstanding web designs, this is the type of illustration that inspire you into creating new ideas.
July 28th, 2010
I just love bokeh :) It looks so amazing in webdesigns. Makes a website look great without being to much. Thanks for sharing these beautiful examples.
Who Linked To This Post?
Share your thoughts, leave a comment!