Pure CSS3 bokeh effect with some jQuery help

Bokeh – 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." (from Wikipedia). I’m pretty sure you’ve seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -kol.

Today, I want to add another addition to the bokeh "hype", by creating a pure CSS3 bokeh effect. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

Still don’t know what we’ll be creating? Make sure to check out the demo and view the source code to learn some more.

The border radius is 50% of the width/height of the element, making the element a full circle. This is what we got so far:

This is something we can work with to create the bokeh effect. Take note the orange border is added in this example; We’ll need to change that later on. Let’s move on to the next step!

Plain bokeh

Let’s focus on the simple version of the bokeh first – the plain one. We’ll be using the CSS3 rgba property for this one (just like we used it on the sweet tabbed navigation). It allows us to set the colour in RGB, and the last parameter will be the opacity (I’ve removed the background-color and border properties from the previous code).

The -moz-radial-gradient allows us to set a from and a to colour. By once again using some RGBA, we can create the see-through effect here too. This piece of code will result in the following effect:

But there is just one catch here: This code now only works in Firefox (because of the -moz prefix). We can’t simply add another background property (supporting the -webkit prefix), since the other one will be overwritten. How can we make this work in Safari/Chrome too?

I found a nifty little workaround to make this work in -webkit browsers too. Simply apply the correct gradient syntax (which is different in webkit than the moz) to the background-image property and you’re ready to go.

So, when using the following code, we can make gradients work on both Firefox and webkit browsers:

Using the same technique as with the plain bokehs, we can change the colour and place them on top of each other. Your result may look like this:

Of course, you can play with the bokeh size too. But there we have it already; a full bokeh effect using pure CSS and HTML! Now let’s do some jQuery to add some more spice to this example, by adding randomness in colour, size and position.

jQuery – Preperations

Of course, we could type our whole HTML and specify a different CSS class to each bokeh element to create a true bokeh effect. But it would be way more fun to create a random effect! In this stage, we’ll take a look at how we can create random colours, size and place the bokeh on a random position.

For the random size and random colour, I used two function from several websites. You might want to take a look at them to see how they work, since we’ll call them from our own function later.

We’re placing each .bokeh element in a z-index of -1, to keep the title and options screen on top. All other properties that we learned in our previous steps (where we learned how to create the actual bokeh using pure CSS) will be generated by jQuery.

jQuery

This is the jQuery script I came up which will be executed on load. It generates all the randomness you’ll need to achieve the effect. I’ve added comments in the source code, so you’ll understand what it’s doing.

That's about it! On the demo page, I've made the variables attached to the user input, so they can decide what's going to happen. You can take a look in the code by downloading the source. You can now "create" (or generate) effects like this:

Or input your own colour! Pretty awesome, isn't it?

Conclusion and Download

Next to playing with colour, size and selecting whether to use gradients or not, you could also add the functionality to (randomly) choose the opacity of each bokeh. Other than that, I think this is a pretty neat effect to see. Maybe to very useful on actual webpages, but it does show the power of CSS3 (combined with jQuery).