---
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-05-25
lang: en
author: "Aditya Sharma"
description: "Do you want to change a drop shadow on hover in Elementor? Adding a hover drop shadow introduces a layer of interactivity to your design. This is especially useful for..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Change-Drop-Shadow-on-Hover-in-Elementor_-1024x536.jpg
word_count: 550
---

# How to Change Drop Shadow on Hover in Elementor?

## 

- Utilizes the Advanced Shadows extension from The Plus Addons for Elementor to change drop shadow on hover.
- Enables the Drop Shadows toggle under Advanced > Advanced Shadows to apply shadow effects to containers or widgets.
- Adds multiple drop shadows and transition values in both Normal and Hover tabs for enhanced interactivity.

Do you want to change a drop shadow on hover in Elementor? Adding a hover drop shadow introduces a layer of interactivity to your design. This is especially useful for transparent images like PNG, SVG, or WebP, because a standard box shadow adds a square shadow around the entire element rather than following the image outline.

With the Advanced Shadows extension from The Plus Addons for Elementor, you can change the drop shadow on hover without any 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/)*

**Best Used For:**

- Design-heavy landing pages with PNG or SVG icons where hover shadows need to follow the element shape, not a square boundary.

- Portfolio and agency sites adding depth to cards, buttons, or images on hover.

- SaaS and product pages where interactive hover states guide visitors toward a call to action.

Now to change the drop shadow on hover, follow the steps –

1. Select a container or a widget.

2. Then go to **Advanced > Advanced Shadows** and enable the **Drop Shadows** toggle.

3. From the **Apply to** dropdown, select where you want to apply the drop shadow. You will find two options –

**Default** – This applies the drop shadow to all elements within the widget or container. Use this when you want the shadow applied uniformly across the entire block.

**Add Custom Class** – This lets you target a specific element by its class name within the widget or container. Use this when you want the drop shadow on one child element only, such as a single image or icon inside a card.

> *Note: You can use the browser Developer tools to find the element's class name.*

4. Then in the **Normal** tab, add a drop shadow by clicking the **+Add Item** button.

From the **X** field, move the shadow horizontally. Positive values shift the shadow right; negative values shift it left.

From the **Y** field, move the shadow vertically. Positive values shift the shadow down; negative values shift it up.

From the **Blur** field, add blur to the shadow. A higher value creates a softer, more diffuse shadow.

In the **Color** field, set a color for the shadow. Use a semi-transparent color for a more natural-looking result.

5. To add multiple drop shadows, click the **+Add Item** button again and configure a new set of values. Layering multiple shadows creates richer depth effects on hover.

In the **Transition css** field, add a transition duration for smooth animation, such as `0.3s`. This controls how fast the shadow appears when the page loads.

6. Then go to the **Hover** tab and enable the **Hover Drop Shadows** toggle. Click the **+Add Item** button to define a different shadow configuration for the hover state.

In the **Transition css** field here, set a transition value to animate between the normal and hover shadow states. A value of `0.3s` to `0.5s` creates a natural-feeling transition on hover.

For a hover effect that reveals or hides content when a visitor moves over an element, see [How to Use the Text Content With the Hover Card in Elementor](https://theplusaddons.com/docs/use-text-content-with-hover-card-in-elementor/).

Now you will see an animated drop shadow on hover.

To add animated shadows to text as well, see [How to Change Text Shadow on Hover in Elementor](https://theplusaddons.com/docs/change-text-shadow-on-hover-in-elementor/).