Create Realistic Shadow For Images – vue-image-shadow


A Vue.js component that applies a configurable, realistic, interactive shadow effect to the image.

How to use it:

1. Import and register the component.

import ImageShadow from 'vue-image-shadow'
Vue.component('image-shadow', ImageShadow)

2. Add the image shadow component to the app and define the path to the image as follows:

<image-shadow :width="200" :src="this.myscr">
export default {
  data() {
    return {
      mySrc: '1.jpg'

3. Config the image shadow using the following component props.

className: {
  type: String
shadowBlur: {
  type: Number,
  default: 20
shadowHover: {
  type: Boolean,
  default: false
shadowRadius: {
  type: Number,
  default: 8
src: {
  type: String,
  required: true
width: {
  type: Number,
  default: 300


Create Realistic Shadow For Images - vue-image-shadow


v1.1.0 (12/15/2020)

  • feat: add alt & perf css

Download Details:

Author: image-component

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-image-shadow --save

$ npm i vue-image-shadow --save

You Might Be Interested In:


Add Comment