Bokeh Effect in Web Design: 30 Excellent Examples and Tutorials

Featured image for 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 ↓

Frisk Design

Sebcreation ↓

Sebcreation

Squarespace ↓

Squarespace

Vogue ↓

Vogue

Designed by Dave ↓

Designed by Dave

Newism ↓

Newism

Designphunk ↓

Designphunk

Crush Lovely ↓

Crush Lovely

Portable Light ↓

Portable Light

Lisa Maya ↓

Lisa Maya

Webunder ↓

Webunder

Tierra Virtual ↓

Tierra Virtual

KLAR ↓

KLAR

Sattom Media ↓

Sattom Media

Shawn Leslie ↓

Shawn Leslie

Envato ↓

Envato

Zeemi Design ↓

Zeemi Design

72 Thinking ↓

72 Thinking

Bravura ↓

Bravura

Moonit ↓

Moonit

PSD 2 Ecommerce ↓

PSD 2 Ecommerce

Masérnicka ↓

Masérnicka

RiteBrainr ↓

RiteBrainr

Onvo Media ↓

Onvo Media

Constantin Potorac ↓

Constantin Potorac

Roxanne Labajo ↓

Roxanne Labajo

DIV Playes ↓

DIV Players

Traffik ↓

Traffik

Eighty8Four ↓

Eighty8Four

Unuidesign ↓

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.

Popular Articles

68 thoughts on “Bokeh Effect in Web Design: 30 Excellent Examples and Tutorials

  1. Pingback: designfloat.com
  2. 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!

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

  4. @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.

  5. 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!

  6. 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!! :]

  7. 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” ;)

  8. 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 !

  9. @ 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.

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

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

  12. 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!

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

  14. 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?

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

  16. Can’t believe I just now came across this post! My favorite is definitely Roxanne Labajo’s site…what a great portfolio website!

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>