When Bokeh Meets Web Design: Stylishly Out Of Focus Backgrounds

Share this article

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.

KONICA MINOLTA DIGITAL CAMERA
Image by Celia
bokeh11
Image by Regular Jane

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

Nanette Workman
Nanette
SebCreation
sebcreation
Traffik
Traffik
Zeemi Design
Zeemi
Sony
Sony
Sephora Claus
SephoraClaus
Charlie Gentle
CharlieGentle

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

CuteBubblestheme

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?

Jennifer FarleyJennifer Farley
View Author

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

backgroundWeb Design Tutorials & Articles
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form