Manly Manly - 1 year ago 77
CSS Question

Box shadow color based on colors from image?

Is it possible to have the

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
colors, often related to their parent image (pictured below).

enter image description here

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.

Answer Source

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.