Bokeh Effect in Web Design: Examples and Tutorials

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.

Hilde is a Norwegian girl with a great passion for everything related to design, freelancing, PhotoShop, photography, Illustrator and more. Running her own website and work with mainly Graphic Design and Business Consulting besides article writing.

Comments

  1. / Reply

    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).

  2. / Reply

    wow … beautifull collection.

    by the way, you’ve got delicious site ;)

    I have bookmarked it as well

  3. / Reply

    Good because good effect on business and main reason is contrariety work.Like this attraction part in this.

  4. / Reply

    Awesome post! good work my friend! thanks a lot for sharing.

  5. / Reply

    Hey this is wonderful collection of bokeh websites. I like Newishm and Traffik websites. Thanks for sharing.

  6. / Reply

    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

  7. / Reply

    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.

  8. / Reply

    Great collection! Thanks for the article..

  9. / Reply

    excellent collection.

    1. / Reply

      This is fantastic

  10. / Reply

    I love this effect, and often use it in my works. Thanks for sharing this collection.

    • Jane,
    • September 14, 2010
    / Reply

    It’s great collection.

  11. / Reply

    Niiice post, take a look, in this site too!

    http://www.bonstutoriais.com.br

    its another good design bokeh.

    • Arun,
    • September 22, 2010
    / Reply

    My portfolio is not on the list :(

    • Seb,
    • October 14, 2010
    / Reply

    Thanks guys. I’ve designed a new version of my Website for the 5th anniversary :)

    JS Rocks !

  12. / Reply

    thanks for sharing this wonderful post

  13. / Reply

    nice blog thanks for

    • Goge,
    • July 17, 2011
    / Reply

    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.

  14. / Reply

    Nice tutorials thnx a lot!

  15. / Reply

    I really like this, thanks a lot

  16. / Reply

    Thank you for interesting review. I found one more solution to make original photo as tilt-shift photo with bokeh type and strong selection. You may find examples here: http://www.tiltshiftgenerator.com/gallery.php

  17. / Reply

    Thanks for sharing these types of Effect which is helpful to all.

    • Clippingpath Saffron,
    • February 11, 2016
    / Reply

    nice collection…….thanks for share…

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.