---
title: "How to Change Drop Shadow on Hover in Elementor?"
url: https://theplusaddons.com/docs/change-drop-shadow-on-hover-in-elementor/
date: 2023-12-27
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "A box shadow is always a rectangle, even around a transparent PNG or SVG. A drop shadow follows the visible shape instead, so a star casts a star-shaped shadow. With..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Change-Drop-Shadow-on-Hover-in-Elementor_-1024x536.jpg
word_count: 652
---

# How to Change Drop Shadow on Hover in Elementor?

## 

- Advanced Shadows from The Plus Addons for Elementor adds stacked drop shadows to any widget or container and changes them on hover without custom CSS.
- The extension is part of the free The Plus Addons for Elementor plugin, and it sits under The Plus Addons > Extensions in the Plus Effects group.
- Transparent PNG, SVG, or WebP images show the shape-following effect, while solid rectangular images make a drop shadow look like a box shadow.
- Hover Drop Shadows replaces the normal list on hover, and the post notes that the effect may not appear in the Elementor editor canvas, so Preview or the published page is needed.

A box shadow is always a rectangle, even around a transparent PNG or SVG. A drop shadow follows the visible shape instead, so a star casts a star-shaped shadow.

With the **Advanced Shadows** extension from The Plus Addons for Elementor you can add stacked drop shadows to any widget or container and change them on hover, without custom CSS.

*To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Shadows extension, [click here](https://theplusaddons.com/docs/advanced-shadows-settings-overview/).*

***Requirement - This extension is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/multi-box-shadows/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — Advanced Shadows is part of the free The Plus Addons for Elementor plugin and works the same with Pro installed.- **Extension to enable:** **Advanced Shadows**, in the **Plus Effects** group under **The Plus Addons > Extensions**. It is off until you turn it on.- **Where the settings are:** select a widget or container, open the **Advanced** tab and expand **Advanced Shadows**, just below **Custom CSS**.- **Use an image with a transparent background** (PNG, SVG or WebP) to see the shape-following effect. On a solid rectangular image a drop shadow looks just like a box shadow.

## Add a Drop Shadow That Changes on Hover

- Select the widget or container, for example an **Image** widget with a transparent PNG.- Go to **Advanced > Advanced Shadows** and switch on **Drop Shadows**.- Leave **Apply to** on **Default** to shadow everything visible in the element, or choose **Add Custom Class** to target one part, such as a single image inside a card. Type the class name **without** the leading dot — `elementor-icon`, not `.elementor-icon`. The field's placeholder shows a dot, but with the dot the shadow is not applied at all.

- On the **Normal** tab click **+ Add Item** and set **X** (positive moves the shadow right), **Y** (positive moves it down), **Blur** and **Color**. A semi-transparent colour looks most natural.- Optionally enter a **Transition css** value such as `all .4s ease`. It animates the change back when the pointer leaves.- Open the **Hover** tab, switch on **Hover Drop Shadows**, click **+ Add Item** and set the shadows for hover. Add a **Transition css** value here too, so the change into hover animates.- Update the page and hover the image on the published page.

![Drop Shadows switched on with Apply to Default, a Soft item open and Transition css all .4s ease](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-drop-shadows.webp)

## The Result

In our test the star had a soft shadow that followed its points. On hover a pink glow and a deeper shadow appeared, still shaped like the star:

![A transparent star image with a soft star-shaped shadow, and on hover a pink glow with a deeper shadow](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-result-drop-hover.webp)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **X** / **Y** | Offset of the shadow, -250 to 250 px. | 0 |
| **Blur** | Softness, 0 to 10 px on the slider. | 0 |
| **Color** | Shadow colour. Add an item with 0 offset and some blur for a glow. | Empty (a light, transparent black is used) |
| **Transition css** | Any CSS transition, e.g. `all .3s ease`. | Empty (no animation) |
| **Hover Drop Shadows** | Turns on the hover list. | Off |

> *Drop shadows have no **Type** or **Spread**. Those two settings exist only under **Box Shadows**.*

## How It Behaves

- The hover list replaces the normal list while the pointer is over the element.- Every item is added to the same filter, so several drop shadows are drawn together.- With **Default** the shadow is cast by everything visible in the widget, including text.

## Limitations

- The drop shadow may not show in the Elementor editor canvas; we did not see it there on the Image widget. Check it in **Preview** or on the published page.- Hover needs a mouse or trackpad, so visitors on touch screens may never see the hover shadows.

## Troubleshooting

### The shadow is a rectangle, not the image shape

The image has a solid background. Use a PNG, SVG or WebP with a transparent background.

### The shadow doesn't change on hover

Make sure **Hover Drop Shadows** is on and has at least one item.

### Add Custom Class shows no shadow

Remove the dot from the start of the class name.

## Related Docs

- [Advanced Shadows: Settings Overview](https://theplusaddons.com/docs/advanced-shadows-settings-overview/)- [How to Change Text Shadow on Hover in Elementor?](https://theplusaddons.com/docs/change-text-shadow-on-hover-in-elementor/)- [How to Add Neumorphism Effect in Elementor?](https://theplusaddons.com/docs/neumorphism-effect-in-elementor/)

## Frequently Asked Questions

**Q: What kind of image works best for a drop shadow that follows the shape?**
A: Transparent images work best, especially PNG, SVG, or WebP files with a transparent background. The reason is simple: a drop shadow follows the visible shape, while a solid rectangular image makes the effect look like a box shadow. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that shape-following behavior in Advanced Shadows, so the image itself has to expose the outline you want the shadow to trace.

**Q: Why does my drop shadow look like a rectangle instead of the image shape?**
A: A solid background is usually the cause. Drop shadows follow the visible shape only when the image has transparency, so a PNG, SVG, or WebP with a transparent background is the right choice. If the image fills a rectangle with no transparent edges, the shadow will behave like a box shadow and outline that rectangle instead of the object inside it.

**Q: How do I make a drop shadow change on hover in Elementor?**
A: The hover effect comes from using both Normal and Hover drop shadow lists in Advanced Shadows. Set your base shadow under Normal, then turn on Hover Drop Shadows and add a separate hover stack. A transition value such as all .4s ease helps animate both directions, so the change into hover and back out feels intentional instead of snapping.

**Q: Can I add stacked drop shadows without custom CSS?**
A: Advanced Shadows in The Plus Addons for Elementor does that directly inside Elementor, so no custom CSS is needed. Each item you add becomes part of the same filter, which means multiple shadows can stack together for glow or depth effects. That matters when you want layered shadows on widgets or containers without writing code or leaving the editor.

**Q: Why doesn't my hover shadow change when I move the mouse over it?**
A: The usual fix is to check that Hover Drop Shadows is turned on and that it has at least one item. The normal list and hover list are separate, and the hover list replaces the normal one while the pointer is over the element. Without an actual hover item in place, nothing changes visually even if the normal shadow is set up correctly.

**Q: What should I use if Add Custom Class shows no shadow?**
A: Remove the leading dot from the class name. The field placeholder shows a dot, but typing .elementor-icon prevents the shadow from being applied at all. Use elementor-icon instead. That detail matters because Add Custom Class is meant to target one part of an element, such as a single image inside a card, not break the selector syntax.