Bokeh Effect in Web Design : Examples and Tutorials

Bokeh effect is the blurred or out of focus part of the image. This effect has become very popular recently, and is normally seen in photography mostly around the light sources. Many designers have made use of this effect in web design to bring the object into sharper focus while making the background visually appealing.

What is The Bokeh Effect?

This effect has become very popular over the last few years. The effect itself is something we would usually see in photography, but software like Photoshop can be used to recreate it.
The word "Bokeh" comes from the Japanese word "Boke" meaning blur.

In photography, Bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or "the way the lens renders out-of-focus points of light." - Wikipedia

Use in Web Design:

Here are some examples of the use of this effect in web design. As you see, the effect itself is quite easy to spot, but it can be used in several ways – making it both easily recognizable and versatile at the same time.
Portable Light

Designphunk

Traffik

Three23

Make Photoshop Faster

Sattom

Envato

Moonit

Newism

Tutorials

As mentioned earlier, the Bokeh effect is originally an effect in photography that also can be recreated digitally. Here are a few tutorials to help you getting started on making your own designs featuring this simple yet effective look.
The first one is for those of you wanting to make the effect with your own camera, while the rest of them focus on making it digitally.
DSLR Bokeh