an image's average color can be its box shadow
JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Average Shadow

Average Shadow is a jQuery plugin that generates a box shadow based on the average color of an image that it is applied to. For example:


Please note that for this to work, images must be served from the same file system (localhost or on a server).


Average Shadow can only be bound to images. If the browser doesn’t support HTML5 canvas, you may specify a fallback color with the option fallbackColor.

Apply it to element on your webpage like so:


or with options

$('.my-cool-images').avgShadow({ horizontal: 10, vertical: 10, spread: 50 });


option description default
horizontal sets the posisition of the horizontal shadow in pixels 0
vertical sets the position of the vertical shadow in pixels 0
blur sets the blur distance in pixels 10
spread sets the size of the shadow in pixels 5
inset uses an inset shadow instead of an outset shadow, a boolean false
fallbackColor color to fallback to if <canvas> is not supported (hex or rgb color value) null

Run Tests

If you want to test Average Shadow you must do so in browser. This is the case because browsers consider getting the data of an image that is served over a local file system to be a security issue.