---
title: "How to Change Text Shadow on Hover in Elementor?"
url: https://theplusaddons.com/docs/change-text-shadow-on-hover-in-elementor/
date: 2023-12-27
modified: 2026-04-10
author: "Aditya Sharma"
description: "Do you want to change the text shadow on hover in Elementor? Adding such interactive effects to elements can add a subtle yet impactful touch to your website's design. Normally..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Change-Text-Shadow-on-Hover-in-Elementor_-1024x536.jpg
word_count: 357
---

# How to Change Text Shadow on Hover in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Advanced Shadows extension allows users to change text shadow on hover without custom CSS.
- Users can apply text shadow to all text elements or target specific elements by class name within a widget or container.
- The process includes adding multiple text shadows and setting transition values for smooth animations on hover.

Do you want to change the text shadow on hover in Elementor? Adding such interactive effects to elements can add a subtle yet impactful touch to your website's design.

Normally to change text shadow on hover you need to use custom CSS but with the Advanced Shadows extension from The Plus Addons for Elementor, you can easily change text shadow on hover without any code.

*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 text shadow on hover follow the steps - 

1. Select a container or a widget that has text.

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

3. From the **Apply to** dropdown, you have to select where you want to apply the text shadow. Here you’ll find two options - 

**Default** - This will apply the text shadow to all the text 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 text 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 text 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 Text Shadows** toggle. Click on the **+Add Item** button to add different sets of text shadows for hover.

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

Now when you hover the text, you'll see different text shadows.

For even more dynamic effects, explore [how to change drop shadows on hover.](https://theplusaddons.com/docs/change-drop-shadow-on-hover-in-elementor/)

## Frequently Asked Questions

**Q: What if the text shadow doesn't appear on hover?**
A: If the text shadow isn't showing up on hover, ensure that you've enabled the Hover Text Shadows toggle in the Hover tab. Additionally, check that you've added the text shadow items correctly in both the Normal and Hover tabs. If the settings are correct and it still doesn't work, inspect the element using browser Developer tools to ensure no conflicting styles are applied.

**Q: What settings work best for creating a dramatic text shadow effect?**
A: For a dramatic text shadow effect, consider using a larger blur value combined with a darker shadow color. This enhances visibility and creates depth. Additionally, adding a transition value in the Transition css field can provide a smooth animation when hovering, making the effect more engaging.

**Q: Does changing text shadow on hover impact page performance?**
A: Generally, adding text shadows using The Plus Addons for Elementor should not significantly impact page performance, as it utilizes CSS for effects rather than heavy scripts. However, excessive use of multiple shadows or complex animations can lead to performance issues, particularly on mobile devices, so it's best to test the effects across different devices.

**Q: How do I remove a text shadow effect if I change my mind?**
A: To remove a text shadow effect, simply navigate back to the Advanced Shadows settings, locate the text shadow item you want to delete, and click the remove option. If you want to disable the hover effect, turn off the Hover Text Shadows toggle. This allows you to revert to the original text styling without shadows.

**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 feature to enhance your text styling.