Add Shadows And Blur Effects To Images – Image Shadow Generator

A JavaScript and Canvas based image shadow generator which exacts colors from your image and applies them to the box-shadow of the image.

The plugin also adds an interactive blur effect to the shadow around the image that auto adjusts the size on hover.

How to use it:

Download and import the Image Shadow Generator library into the html file.

<script src="isg.js"></script>

Add the CSS class _isg to your image.

<img src="example.jpg" class="_isg"/>

Initialize the Image Shadow Generator and done.

let isg = new ImageShadowGenerator();

Set the offset of the box-shadow.

let isg = new ImageShadowGenerator({
    offsetX: 0,
    offsetY: 50
});

Override the default CSS selector.

let isg = new ImageShadowGenerator({
    imgClass: '_isg'
});

Config the blur effect.

let isg = new ImageShadowGenerator({
    shadowBlur: 40,
    hoverBlurSize: 90
    hover: true
});

Enable the debug mode.

let isg = new ImageShadowGenerator({
    debug: true
});

Changelog:

02/25/2020

• Fixed problem with multiple images and double negative mark in styles