christopher-ward / cosha

Colorful shadows for your images. 🎨

cosha

Colorful shadows for your images. 🎨

cosha lets you add colorful shadows to your images. Try it out and look for yourself—the bundle is only less than 1kb small and it couldn't be easier to set up!

How

yarn add cosha

<img src="my-dope-pic.jpg" alt="mmmhm" class="colorful-shadow"/>

import cosha from 'cosha';

cosha({
    className: 'colorful-shadow',
    blur: '10px',
    brightness: '125%',
    saturation: '110%',
    x: '2px',
    y: '6px'
});

Alternatively, if that module-bundler stuff isn't for you, you can get it directly from https://unpkg.com/cosha.

<script src="https://unpkg.com/cosha"></script>

Config

Everything in the config is optional. You can also use it by just calling cosha(). The default values are:

cosha({
    className: 'cosha',
    blur: '5px',
    brightness: 1,
    saturation: 1,
    x: 0,
    y: 0
});

Gotcha

It runs in every browser except Internet Explorer. This is because of missing support for CSS filter properties. In case cosha detects it's running in a browser that doesn't have NodeList.prototype.forEach available, which at this point is only IE <= 11, it simply doesn't do anything.

License

MIT