Add CSS Drop Shadow Effect To Image - image-shadow.js

File Size: 5.36 KB
Views Total: 2580
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Add CSS Drop Shadow Effect To Image - image-shadow.js

image-shadow.js is a small jQuery script that applies a responsive, CSS/CSS3 powered drop shadow effect to images within your document.

Also avaiable as a vanilla JavaScript plugin.

How to use it:

1. Load the required stylesheet image-shadow.min.css in the head section of the webpage.

<link rel="stylesheet" href="assets/css/image-shadow.min.css">

2. All insert the following CSS snippets into your CSS file.

/*--- Container that maintains image and shadow. ---*/
.container-img {
  position: relative;

/*--- IMG takes the full size of container-img. ---*/
img {
  max-width: 100%;

/*--- Setup the image shadow. ---*/
.img-shadow {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: -10%;
  left: 5%;
  width: 90%;
  height: 95%;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);

/*--- Remove shadow for IE and Edge (does not support blur filter). ---*/
@supports (-ms-ime-align: auto) {
  .img-shadow {
    display: none;
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .img-shadow {
    display: none;

3. Add a shadow element to your image.

<img class="img" src="image.jpg" alt="alt">
<div class="img-shadow"></div>

4. Load the necessy jQuery library in the document.

<script src="" 

5. Apply the drop shadow effect to all the images within the document.

$(".img").each(function (e) {
  var imgSrc = $(this).attr("src");

      "background-image": "url(" + imgSrc + ")"

This awesome jQuery plugin is developed by tunguskha. For more Advanced Usages, please check the demo page or visit the official website.