Tim Ellison

Front-End Web Developer

Bokeh Backgrounds with CSS Doodle

May 27, 2018

I’ve been obsessing over this ultra-cool <css-doodle /> web component. It makes it so easy to generate fun and beautiful graphics for websites. I was playing around with one of the samples in the docs and came up with this cool pattern for creating a bokeh background. I’ll walk you through it 😃 The final product will look like this:

(Fair warning: as of the writing of this article web component support is limited. If you want to see the example code working your best bet is to use the latest version of Chrome.)

First we add a <css-doodle> component to our html. Throughout the tutorial we’ll add CSS properties inside this component. Using the :doodle selector we divide the doodle into a 12 by 12 grid, stretch it across the whole viewport, and give it a dark blue background color. Just for illustration purposes I’ve added an outline property so you can see the edges of the empty grid cells.

Let’s start filling our grid cells. We’re going to replace our outline property with background: hsla(@index(), 70%, 68%, 1); . css-doodle exposes the index of each grid cell (starting from 0) using the @index function. Now each cell will be filled with a solid block of color along the spectrum from red (hue 0) to a turquoise (hue 143, because that’s the last index in a 12×12 grid).

css-doodle exposes a number of cool functions, properties, and selectors to help make coding easier. (Check out their awesome docs for a full list.) We’ll use the @shape selector to fill each grid with a circle instead of a square, and we’ll use the random number generator function @rand to randomize the opacity of each circle. Now some of circles will really pop while others fade into the background.

(Fun idea: replace “circle” with another shape from this list.)

Now we’ll add some css transform properties to make things really interesting. First we’ll make the circles smaller or larger at random. We’ll pass @rand two arguments so that it scales down to at least 20% the original size and scales up at most 120% the original size.

And now we’ll add a `translate` effect to move each circle’s center away from it’s origin by a random amount. This gives us an interesting clustering of circles, like neon bubbles in a champagne flute. 🍾

Finally, to get that nice bokeh look we’ll put a blur filter on the :doodle selector. The css blur function unfortunately blurs the container along with the content, so to make sure we don’t see those blurry edges of the doodle we scale the size up just a little bit and add some overflow properties in our stylesheet so the edges of the doodle are off the viewport. And voila!