---
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-09-28
lang: en
author: "Aditya Sharma"
description: "A text shadow that changes when the pointer moves over a heading is a small touch that makes a page feel interactive. Normally it takes custom CSS. With the Advanced..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Change-Text-Shadow-on-Hover-in-Elementor_-1024x536.jpg
word_count: 558
---

# How to Change Text Shadow on Hover in Elementor?

## 

- Advanced Shadows from The Plus Addons for Elementor sets one text-shadow list for Normal and another for Hover, with an optional Transition css value such as all .4s linear.
- The Plus Addons for Elementor lets a user target all text with Apply to: Default or one part with Add Custom Class, and the class name is entered without the leading dot.
- Hover Text Shadows replaces the normal list while the pointer is over the element, and the post says the shadow may not show in the Elementor editor canvas, so Preview or the published page is needed.

A text shadow that changes when the pointer moves over a heading is a small touch that makes a page feel interactive. Normally it takes custom CSS.

With the **Advanced Shadows** extension from The Plus Addons for Elementor you set one list of text shadows for the normal state and another for hover, with an optional animation between them.

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

***Requirement - This extension is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/multi-box-shadows/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — Advanced Shadows is part of the free The Plus Addons for Elementor plugin and works the same with Pro installed.- **Extension to enable:** **Advanced Shadows**, in the **Plus Effects** group under **The Plus Addons > Extensions**. It is off until you turn it on.- **Where the settings are:** select a widget or container, open the **Advanced** tab and expand **Advanced Shadows**, just below **Custom CSS**.

## Add Text Shadows That Change on Hover

- Select a widget with text, such as a **Heading**, or a container that holds text.- Go to **Advanced > Advanced Shadows** and switch on **Text Shadows**.- Leave **Apply to** on **Default** to shadow all text in the element, or choose **Add Custom Class** to target one part. Type the class name **without** the leading dot — `elementor-icon`, not `.elementor-icon`. The field's placeholder shows a dot, but with the dot the shadow is not applied at all.

- On the **Normal** tab click **+ Add Item** and set **X**, **Y**, **Blur** and **Color**. Add more items to stack shadows.- Optionally enter a **Transition css** value such as `all .4s linear`. It animates the change back when the pointer leaves.- Open the **Hover** tab, switch on **Hover Text Shadows** and add the items you want while hovering.- Enter a **Transition css** value on this tab too, so the change into hover animates.- Update the page and hover the text on the published page.

![The Hover tab of Text Shadows with Hover Text Shadows on, a Pink item open and Transition css all .4s linear](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-text-hover.webp)

## The Result

In our test the heading had a soft grey shadow, and on hover it changed to a bold pink and blue double shadow:

![A heading with a soft grey text shadow, and the same heading on hover with pink and blue offset shadows](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-result-text-hover.webp)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **X** / **Y** | Offset of the shadow, -250 to 250 px. | 0 |
| **Blur** | Softness, 0 to 10 px on the slider. Use 0 for a crisp, graphic shadow. | 0 |
| **Color** | Shadow colour. | Empty (a light, transparent black is used) |
| **Transition css** | Any CSS transition, e.g. `all .3s linear`. | Empty (no animation) |
| **Hover Text Shadows** | Turns on the hover list. | Off |

## How It Behaves

- The hover list replaces the normal list while the pointer is over the element.- With **Default**, the shadow is set on the whole widget, so it also applies when the pointer is over empty space inside the widget, not only over the letters.

## Limitations

- The shadow may not show in the Elementor editor canvas; we did not see it there on the Heading widget. Check it in **Preview** or on the published page.- Hover needs a mouse or trackpad, so visitors on touch screens may never see the hover shadows.

## Troubleshooting

### The shadow doesn't change on hover

Make sure **Hover Text Shadows** is on and has at least one item.

### The change is instant instead of smooth

Add a **Transition css** value on both the **Normal** and **Hover** tabs.

## Related Docs

- [Advanced Shadows: Settings Overview](https://theplusaddons.com/docs/advanced-shadows-settings-overview/)- [How to Change Drop Shadow on Hover in Elementor?](https://theplusaddons.com/docs/change-drop-shadow-on-hover-in-elementor/)- [How to Add Neumorphism Effect in Elementor?](https://theplusaddons.com/docs/neumorphism-effect-in-elementor/)

## Frequently Asked Questions

**Q: Why doesn’t the text shadow change on hover in Elementor?**
A: Hover Text Shadows has to be switched on, and it needs at least one item in the hover list. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses separate Normal and Hover lists here, so if the hover side is empty the normal shadow just stays in place. A quick sanity check is to test on the published page or Preview, since the editor canvas may not show the effect reliably.

**Q: Can I change text shadow on hover without writing custom CSS?**
A: The Advanced Shadows extension handles this inside Elementor, so custom CSS is not required for this effect. That matters because you can set one list of text shadows for Normal and another for Hover directly in the widget or container settings. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this through Advanced Shadows, which is part of the free plugin and works the same with Pro installed.

**Q: What’s the best way to make the hover shadow animate smoothly?**
A: A Transition css value on both the Normal and Hover tabs is what makes the change feel smooth instead of snapping. The page gives an example like all .4s linear, which is enough to animate both directions cleanly. If you only set it on one side, the motion can feel inconsistent when the pointer enters or leaves. That small detail matters more than stacking extra shadows because it controls the timing of the swap.

**Q: Does text shadow on hover work on mobile devices?**
A: Hover effects depend on a mouse or trackpad, so visitors on touch screens may never see the hover shadows at all. That’s a real limitation of pointer-based interaction, not a settings issue. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH can still apply the shadow settings in Elementor, but the hover state itself needs a hovering pointer to trigger.

**Q: Should I apply text shadow to all text or only part of a heading?**
A: Apply to Default when you want every bit of text in the element to share the same shadow behavior. Use Add Custom Class when you only want one part targeted, and enter the class name without the leading dot. The page calls out a gotcha here: typing .elementor-icon with the dot prevents the shadow from being applied at all.

**Q: Why does my text shadow look different in Elementor editor than on the live page?**
A: The effect may not show in the Elementor editor canvas even when it works correctly elsewhere. The page specifically notes that it did not appear there on the Heading widget during testing. For a reliable check, use Preview or view the published page, because that’s where hover behavior and stacked shadows are more likely to render as expected.