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.

This time we're going to show you some examples of the very popular Bokeh effect in web design and also share with you some tutorials on how you can create this effect yourself.

Bokeh Effect in Web Design: Examples and Tutorials

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
Portable Light

Designphunk
Designphunk

Designed by Dave
Designed by Dave

Traffik
Traffik

Three23
Three23

Webexpedition18
Webexpedition18

Sephora Claus
Sephora Claus

72 thinking: Outlets
72 thinking: Outlets

Onvo Media
Onvo Media

Pixel Pleasure
Pixel Pleasure

Make Photoshop Faster
Make Photoshop Faster

Sebcreation
Sebcreation

Roxanne Labajo
Roxanne Labajo

Sattom
Sattom

Bravura Coaching
Bravura Coaching

Cannonball
Cannonball

Nanette Workman
Nanette Workman

Shawn Leslie
Shawn Leslie

Unuidesign
Unuidesign

Webunder
Webunder

Light is light
Light is light

Envato
Envato

Moonit
Moonit

David Quartino
David Quartino

IconDock
IconDock

Charlie Gentle
Charlie Gentle

Traxor Designs
Traxor Designs

Logic by Design
Logic by Design

Surgeworks
Surgeworks

Frish Design Studio
Frish Design Studio

Sony CES
Sony CES

Newism
Newism

Frisk Design
Frisk Design

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
DSLR Bokeh

Awesome digital bokeh effect in Photoshop
Awesome digital bokeh effect in Photoshop

How to Create a Simple Bokeh Effect
How to Create a Simple Bokeh Effect

Bokeh Background Effect
Bokeh Background Effect

Bokeh Light Bubbles
Bokeh Light Bubbles

Colorful Bokeh Effect in Pixelmator
Colorful Bokeh Effect in Pixelmator

Pure CSS3 bokeh effect with some jQuery help
Pure CSS3 bokeh effect with some jQuery help

Bokeh Vector background in Illustrator
Bokeh Vector background in Illustrator

Sleek icon design
Sleek icon design

Hexagon Bokeh Effect in Photoshop
Hexagon Bokeh Effect in Photoshop

Bokeh Effect in 3ds Max
Bokeh Effect in 3ds Max

Design a Sleek Bokeh Styled Portfolio
Design a Sleek Bokeh Styled Portfolio

How To Create A Sweet Bokeh Business Card In Photoshop
How To Create A Sweet Bokeh Business Card In Photoshop

How to create abstract colorful background with bokeh effect in Photoshop
How to create abstract colorful background with bokeh effect in Photoshop

Time to Get Started?

We're hoping that this article has helped you to understand a bit more what this effect is all about, and to see how this can be used. We'd love to hear your feedback. Now it’s time to try it out yourself.