---
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-04-10
author: "Aditya Sharma"
description: "Do you want to change a drop shadow on hover in Elementor? By changing the drop shadow on hover can add a touch of interactivity to your website. This is..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Change-Drop-Shadow-on-Hover-in-Elementor_-1024x536.jpg
word_count: 357
---

# How to Change Drop Shadow on Hover in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Advanced Shadows extension allows users to change drop shadow on hover.
- Users can apply drop shadows to all elements within a widget or container by selecting the Default option.
- The Transition css field enables users to add a transition value for smooth animation of drop shadows.

Do you want to change a drop shadow on hover in Elementor? By changing the drop shadow on hover can add a touch of interactivity to your website. This is especially useful for adding shadow on a png, SVG or webp image because a normal box shadow will add a square shadow.

With the Advanced Shadows extension from The Plus Addons for Elementor, you can easily change drop shadow on hover.

*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/)*

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, you have to select where you want to apply the drop shadow. Here you’ll find two options - 

**Default** - This will apply the drop shadow to all the elements within the widget or the container.

**Add Custom Class** - With this option, you can target an element by class name within a widget or container.

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

4. Then in the **Normal** tab you have to add a drop shadow by clicking on the **+Add Item** button.

From the **X** field, you can move the shadow horizontally. 

From the **Y** field, you can move the shadow vertically. 

From the **Blur** field, you can add blur to the shadow.

In the **Color** field, you can add color to the shadow.

5. Following the same process click on the **+Add Item** button to add multiple drop shadows.

In the **Transition css** field, you can add a transition value for a smooth animation.

6. Then go to the **Hover** tab and enable the **Hover Drop Shadows** toggle. Click on the **+Add Item** button to add different sets of drop shadows for hover.

Again in the **Transition css** field, you can add a transition value for a smooth animation.

Now you’ll see an animated drop shadow on hover.

For further exploration of design techniques on [text shadow effects in Elementor.](https://theplusaddons.com/docs/change-text-shadow-on-hover-in-elementor/)

## Frequently Asked Questions

**Q: What should I do if the drop shadow on hover isn't appearing?**
A: If the drop shadow on hover isn't showing, ensure that you've enabled the Hover Drop Shadows toggle in the Hover tab. Additionally, check that you've added the drop shadow items correctly in both the Normal and Hover tabs. If you're using a custom class, verify that the class name is accurate by using the browser Developer tools to inspect the element.

**Q: What settings work best for creating an effective drop shadow on hover?**
A: For an effective drop shadow on hover, consider using a subtle blur effect combined with a slightly darker color than the background. This enhances visibility without overwhelming the design. Adjust the X and Y fields to position the shadow naturally, and use the Transition css field for smooth animations, making the hover effect more engaging.

**Q: Does changing the drop shadow on hover affect page performance?**
A: Changing the drop shadow on hover generally has minimal impact on page performance, especially if you keep the number of shadows reasonable. However, excessive use of complex shadows or animations can lead to performance issues on lower-end devices. It's best to test your design across different devices to ensure smooth performance.

**Q: Can I use the Advanced Shadows extension with other page builders?**
A: The Advanced Shadows extension from The Plus Addons for Elementor works exclusively with Elementor. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, you can take full advantage of this extension to enhance your designs with customizable drop shadows.