Skip to content Accessibility

Gradient Impressionism

Revisiting a fun project of mine that creates CSS gradients from images.



Photograph of a purple and orange sky behind trees cast in silhouette.

A sunset over the weekend reminded me of a fun project I built whilst living in Berlin called Image2Gradient.

In it a fairly rudimentary algorithm takes an image, runs some colour analysis, and creates a CSS gradient that best matches the image.

The gradient can be rendered in place of an image during its loading phase, which makes the transition from no image to image somewhat graceful. This trick of the eye attempts to improve the perceived speed of loading graphical content on the web, much like skeleton screens do.

Pinterest do this using the dominant colour of an image. And Medium render a low resolution version of an image until its high resolution counterpart is available.

Image2Gradient sits between the two.

Why am I talking about this now? The sunset sparked a realization that unlike many unfinished / abandoned / non-marketed projects on GitHub Image2Gradient is different.

It is far closer to computer generated art than a serious open source project. And what good is art if it isn’t enjoyed albeit only by me.

For this reason every month I will post a photo along with its gradient counterpart, the first being the sunset that inspired this post.

About the author

I'm Callum, a Front-end Engineer at Nutmeg. Previously I wrote code for KAYAK, American Express, and Dell. Out of hours I publish blog posts (like this one) and tweet cherry-picks.

Feel free to follow or message me at @_callumhart on Twitter.