javascript - Box shadow color based on colors from image? - Stack Overflow

admin管理员组

文章数量:1221786

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

Share Improve this question Follow asked Aug 19, 2016 at 15:24 ManlyManly 37933 silver badges1818 bronze badges 3

• 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

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 13

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.

本文标签： javascriptBox shadow color based on colors from imageStack Overflow