---
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
lang: en
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?

## 

- Utilizes the Advanced Shadows extension from The Plus Addons for Elementor to change text shadow on hover without custom CSS.
- Enables the Text Shadows toggle in the Advanced settings of a selected container or widget to apply text shadows.
- Allows adding multiple text shadows and transition values for both normal and hover states using the +Add Item button.

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