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.
Requirement – This extension is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
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 Result
In our test the heading had a soft grey shadow, and on hover it changed to a bold pink and blue double shadow:
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.
