Colorful & Blurred Shadows For Images – Cosha

Category: Image , Javascript , Recommended | March 25, 2023
Views Total:34 views
Official Page:Go to website
Last Update:March 25, 2023


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 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.

<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="" />

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

  blur: '5px',
  brightness: '125%',
  saturation: '110%'

5. Set the shadow size. Default: 0.

  x: '5px',
  y: '5px'


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

You Might Be Interested In:

Leave a Reply