cosha
Colorful shadows for your images. 🎨
cosha
lets you add colorful shadows to your images. Try it out and look for yourself—it really couldn't be easier to set up!
How
npm i cosha
<!-- on an img tag -->
<img src="palm-tree.jpg" alt="nice vibes" class="colorful-shadow"/>
<!-- on a picture tag -->
<picture class="colorful-shadow">
<source srcset="palm-tree-1200.jpg 1200w, palm-tree-800.jpg 800w, palm-tree-400.jpg 400w" type="image/jpeg">
<source srcset="palm-tree-1200.webp 1200w, palm-tree-800.webp 800w, palm-tree-400.webp 400w" type="image/webp">
<img src="palm-tree-400.jpg" alt="nice vibes"/>
</picture>
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 type="module">
import cosha from "https://unpkg.com/cosha";
cosha();
</script>
Config
Everything in the config is optional. You can also use it by just calling cosha()
.
cosha(options);
options.className
Type: string
Default: "cosha"
The class the plugin looks for. This should be on the original img
or picture
node(s).
options.blur
Type: number | string
Default: "5px"
The amount of blur to apply to the image. See the CSS blur
function docs on MDN for more details.
options.brightness
Type: number | string
Default: 1
The amount of brightness to apply to the image. See the CSS brightness
function docs on MDN for more details.
options.saturation
Type: number | string
Default: 1
The amount of saturation to apply to the image. See the CSS saturation
function docs on MDN for more details.
options.x
Type: number | string
Default: 0
The amount of horizontal translation to apply to the image. See the CSS translate
function docs on MDN for more details.
options.y
Type: number | string
Default: 0
The amount of vertical translation to apply to the image. See the CSS translate
function docs on MDN for more details.
Gotcha
It runs in every browser except Internet Explorer. This is because of missing support for standard CSS filter
functions.
License
MIT