Bokeh Effect in Web Design: 30 Excellent Examples and Tutorials




Unless you’ve been living under a rock for the past year or so, I am sure everyone is aware of the Bokeh effect. This article will showcase the Bokeh effect in web design from bright and bold backgrounds to the subtle black and white. Some even go as far as to make the Bokeh effect animated, which looks really awesome. :)

The thing that struck me was that I could remember (or so I thought) seeing a lot of website designs that utilized this effect, yet when I actually went scouring the web for them – there really weren’t that many. I hope you enjoy them and find some inspiration through them.

Frisk Design ↓

Frisk Design

Sebcreation ↓

Sebcreation

Squarespace ↓

Squarespace

Vogue ↓

Vogue

Designed by Dave ↓

Designed by Dave

Newism ↓

Newism

Designphunk ↓

Designphunk

Crush Lovely ↓

Crush Lovely

Portable Light ↓

Portable Light

Lisa Maya ↓

Lisa Maya

Webunder ↓

Webunder

Tierra Virtual ↓

Tierra Virtual

KLAR ↓

KLAR

Sattom Media ↓

Sattom Media

Shawn Leslie ↓

Shawn Leslie

Envato ↓

Envato

Zeemi Design ↓

Zeemi Design

72 Thinking ↓

72 Thinking

Bravura ↓

Bravura

Moonit ↓

Moonit

PSD 2 Ecommerce ↓

PSD 2 Ecommerce

Masérnicka ↓

Masérnicka

RiteBrainr ↓

RiteBrainr

Onvo Media ↓

Onvo Media

Constantin Potorac ↓

Constantin Potorac

Roxanne Labajo ↓

Roxanne Labajo

DIV Playes ↓

DIV Players

Traffik ↓

Traffik

Eighty8Four ↓

Eighty8Four

Unuidesign ↓

Unuidesign

Want to make your own Bokeh Design?

Below are links to two tutorials from the awesome Abduzeedo website that show you how to make this effect in both pixelmator and photoshop. The process is actually pretty simple and it turns out some really great results for web designs.

And for those of you DIY-ers interested in creating this effect manually:

What do you think? You think the bokeh effect is overused or one that could be utilized a bit more in the future? Let us know in the comments.

70-642 sample questions by testking provide you exact review of real exam so that you can easily pass your 220-701 and 640-822 exams.





Comments:

Scroll back to the top