When Bokeh Meets Web Design: Stylishly Out Of Focus Backgrounds

By Jennifer Farley

The Bokeh effect is very popular online at the moment, both in photography and as background images in web design. It’s not a new phenomenon. It is reported to have first been popularized in Photo Techniques magazine in 1997. The word bokeh comes from the Japanese word boke which means haze or blur. It’s not just any old blur though, it is specifically out-of-focus blur rather than a blur caused by the camera or the subject moving. Bokeh is often seen as bight blurry polygonal shapes and lights in the foreground and background of photographs. Here’s a couple of examples.


Image by Celia


Image by Regular Jane

Having looked through many websites using bokeh backgrounds, here’s a few that I really liked.

Nanette Workman






Zeemi Design




Sephora Claus


Charlie Gentle


And finally, if you’d like a ready made wordpress theme using a bokeh background, here’s one called Cute Bubbles.


The effect has also proven to be very popular as a background with web designers. Of course you don’t have to take a photograph yourself to create the effect using Photoshop or other image editors, and there are plenty of bokeh images available which are free to download.

Where to find bokeh backgrounds

Other Bokeh Design resources

What do you think about the Bokeh trend? Overused or you can’t get enough of it? Any other good examples that you’d like to share?

  • Tyssen

    I think the first time I saw it was at

  • XLCowBoy

    Sony was first.

    Then everyone followed.

    (Sitepoint seems more and more like Smashing Magazine everyday)

  • Craig Buckler

    It’s also worth mentioning the other advantage to these backgrounds – the images can be more highly compressed and download faster.

  • DGBomb

    These backgrounds are very similar to each other. They would die as quickly as they appeared. So I would suggest do not use them in design at all. Soon it will be bad manners.

  • TomBradshaw

    I really like the Bokeh effect and it works great in web design. Although it has become really popular over the past year and I can see it going out of fashion eventually.

    That said, I had to have a Bokeh site in my portfolio:

  • Jeff

    Here’s a site that I recently created…

  • Jennifer Farley

    Thanks guys for the links and comments.

    Tom, I really like the SASSI site. If I’d known about that I would have included it in the set on Pink websites.

    DGBomb, “soon it will be bad manners” – LOL!

  • Cat Lady

    Really cool post! I think bokeh is cool!
    I think every designer should have a bokeh piece in their collection…

    Does it still count as bokeh when another shape other than circles are used?



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.