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:
$('img').avgShadow();
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 |
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.
