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.
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.
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.
