Box shadow color based on colors from image?

Question

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.

http://stackoverflow.com/questions/7332573/getting-the-most-frequently-appearing-color-of-an-image — Paulie_D, Aug 19 '16 at 15:28
I googled and found this: http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript — Daniel, Aug 19 '16 at 15:28
They are using [Vibrant.js](http://jariz.github.io/vibrant.js/) — Adam Azad, Aug 19 '16 at 15:29

score 7 · Accepted Answer · answered Aug 19 '16 at 15:28

7

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:

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

answered Aug 19 '16 at 15:28

Juan Ferreras

2,801
2
13
16

2

I don't know why I never thought to google how to extract the color first...rookie mistake. I was googling things like "box-shadow based on image color" and found nothing. Thanks! – Manly Aug 19 '16 at 16:11

score 7 · Answer 2 · answered Jul 16 '20 at 14:43

7

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

answered Jul 16 '20 at 14:43

Yogesh Bhatt

149
2
2

That's actually the most useful answer – EscapeNetscape Nov 03 '22 at 19:24

Box shadow color based on colors from image?

2 Answers2