Colorful & Blurred Shadows For Images – Cosha

Cosha is a JavaScript library that applies colorful shadows to the image by cloning & blurring the image and placing it behind the original image.

How to use it:

1. Install and import the Cosha as an ES module.

# Yarn
$ yarn add cosha
# NPM
$ npm i cosha --save

import cosha from 'cosha';

2. Or load the compiled JavaScript in the document.

<script src="cosha.iife.js"></script>

3. Apply the Cosha to the image within the document.

cosha('.has-shadow');

<img src="1.jpg" class="has-shadow" alt="" />
<picture class="has-shadow">
  <source srcset="1.jpg 1200w, 1-800.jpg 800w, 1-400.jpg 400w" type="image/jpeg">
  <source srcset="1.webp 1200w, 1-800.webp 800w, 1-400.webp 400w" type="image/webp">
  <img src="1-400.jpg" alt="" />
</picture>

4. Customize the blur, brightness, and saturate filter functions.

cosha('.has-shadow',{
  blur: '5px',
  brightness: '125%',
  saturation: '110%'
});

5. Set the shadow size. Default: 0.

cosha('.has-shadow',{
  x: '5px',
  y: '5px'
});

Changelog:

v3.0.1 (03/25/2023)

• update

v2.0.3 (10/17/2022)

• update

v2.0.0 (01/16/2022)

• drop ie, simplify api, clean up css

v1.1.1 (05/10/2021)

• run esm and cjs bundles through buble, too (fix breaking on ie)
• check for -ms-filter instead of NodeList.prototype.forEach to target ie