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.
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.
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.
Awesome digital bokeh effect in Photoshop
How to Create a Simple Bokeh Effect
Colorful Bokeh Effect in Pixelmator
Pure CSS3 bokeh effect with some jQuery help
Bokeh Vector background in Illustrator
Hexagon Bokeh Effect in Photoshop
Design a Sleek Bokeh Styled Portfolio
How To Create A Sweet Bokeh Business Card 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.
Nice round up of sites. I always loved that effect, but never knew what it was called (or that so many people were using it on their sites).
wow ... beautifull collection.
by the way, you've got delicious site ;)
I have bookmarked it as well
Good because good effect on business and main reason is contrariety work.Like this attraction part in this.
Awesome post! good work my friend! thanks a lot for sharing.
Hey this is wonderful collection of bokeh websites. I like Newishm and Traffik websites. Thanks for sharing.
yeah have seen this in lots of sites, and now these great examples... i also have made a poster with these Bokeh Effects...
Great inspiration though... Good Show =)
Thanks
It's a great background effect. Quite a simple way to create mood by changing the background into a glimmering sea, an urban landscape or whatever. Need to be careful with it though, since in some cases it just looks like floating dust which may not be the image the designer was looking for.
Great collection! Thanks for the article..
excellent collection.
I love this effect, and often use it in my works. Thanks for sharing this collection.
It's great collection.
Niiice post, take a look, in this site too!
http://www.bonstutoriais.com.br
its another good design bokeh.
My portfolio is not on the list :(
Thanks guys. I've designed a new version of my Website for the 5th anniversary :)
JS Rocks !
thanks for sharing this wonderful post
nice blog thanks for
Hi nice post, i have come across your site once before when searching for something so i was just wondering something. I love your theme.
Nice tutorials thnx a lot!
I really like this, thanks a lot