Is it possible to have the box-shadow adjust its color value, based on the colors in the image it's being applied to?

If you look at abduzeedo's site, you will notice that the images all have unique box-shadow colors, often related to their parent image (pictured below).

I did notice that the CSS is being inserted in-line into the HTML, which says to me this is done through scripting, but how? Are these colors actually being pulled from their images or are they arbitrarily/manually generated?

I've tried searching for this on Google, but I'm not having much luck. I'm not asking for a tutorial, mostly just what this is called, how to find it, or if it's even possible to do it dynamically, rather than randomly or manually.

Is it possible to have the box-shadow adjust its color value, based on the colors in the image it's being applied to?

If you look at abduzeedo's site, you will notice that the images all have unique box-shadow colors, often related to their parent image (pictured below).

I did notice that the CSS is being inserted in-line into the HTML, which says to me this is done through scripting, but how? Are these colors actually being pulled from their images or are they arbitrarily/manually generated?

I've tried searching for this on Google, but I'm not having much luck. I'm not asking for a tutorial, mostly just what this is called, how to find it, or if it's even possible to do it dynamically, rather than randomly or manually.

• javascript
• jquery
• css

• stackoverflow.com/questions/7332573/… – Paulie_D Commented Aug 19, 2016 at 15:28
• I googled and found this: stackoverflow.com/questions/2541481/… – Daniel Commented Aug 19, 2016 at 15:28
• They are using Vibrant.js – Adam Azad Commented Aug 19, 2016 at 15:29

2 Answers 2

Simplest approach would be to duplicate an image over other (using position: absolute;), like two layers, one over another, and then apply filter: blur(16px); on background image.

Checkout: Codepen-demo

You need to use JavaScript for this as you mention. There are a few different options of plug-ins that you can use but the two most populare are:

1. Color Thief
2. VibrantJS

Extract the dominant color of the image, and apply an inline box-shadow style with that color on the particular element.