Elementor’s own shadow controls give you one shadow per element. Soft, realistic depth and effects like neumorphism usually need two or more shadows stacked together.
The Advanced Shadows extension in The Plus Addons for Elementor lets you stack as many box, text and drop shadows as you like on any widget or container, and swap them for a different set on hover.
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.
Turn On the Extension
- In your WordPress dashboard go to The Plus Addons > Extensions.
- Find Advanced Shadows in the Plus Effects group (or search for it).
- Switch its toggle on.
Where the Settings Are
- Open a page in Elementor and select a widget or a container.
- Go to the Advanced tab and expand Advanced Shadows.
- Switch on Box Shadows, Text Shadows or Drop Shadows. You can use all three on the same element.
The Three Shadow Types
| Switch | What it adds | Best for |
|---|---|---|
| Box Shadows | Shadows around the element’s box (CSS box-shadow) | Cards, buttons, containers, neumorphism |
| Text Shadows | Shadows behind the letters (CSS text-shadow) | Headings and other text |
| Drop Shadows | A shadow that follows the visible shape (CSS drop-shadow filter) | Transparent PNG, SVG and WebP images, icons |
Settings Inside Each Type
Every type has the same layout: where to apply it, then a Normal and a Hover tab.
| Setting | What it does | Default |
|---|---|---|
| Apply to | Default styles the selected widget or container itself. Add Custom Class targets an element inside it by class name. | Default |
| Enter Custom Class Name | The class to target. 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. | Empty |
| + Add Item | Adds one shadow. Add more items to stack shadows; they are drawn together. | No items |
| Label | A name for the item in the list. It does not change the shadow. | Box Shadow 1 / Text Shadow 1 / Drop Shadow 1 |
| Type (box only) | Outset draws outside the box, Inset inside it. | Outset |
| X / Y | Horizontal and vertical offset, -250 to 250 px. | 0 |
| Blur | Softness. The slider runs from 0 to 10 px. | 0 |
| Spread (box only) | Grows or shrinks the shadow, -50 to 50 px. | 0 |
| Color | Shadow colour. Use a semi-transparent colour for natural shadows. | Empty (a light, transparent black is used) |
| Transition css | A CSS transition such as all .3s linear, so the change between normal and hover animates. | Empty |
| Hover Box Shadows / Hover Text Shadows / Hover Drop Shadows | On the Hover tab: switch on and add a second list of shadows that replaces the normal list while the pointer is over the element. | Off |
Default or Add Custom Class?
On the page below the same two box shadows were added to three Icon widgets. On the left, Add Custom Class with elementor-icon puts the shadow on the round icon. In the middle, the same class typed with a dot draws nothing. On the right, Default shadows the widget’s whole square box.
To find a class name, right-click the element on the published page, choose Inspect, and copy one of the classes from the highlighted tag.
How It Behaves
- The shadows are written as CSS into the page, so they appear on the published page for every visitor.
- Several items in one list are drawn together, first item on top.
- The hover list replaces the normal list; it is not added to it. Repeat any normal shadow you want to keep on hover.
- The extension is in the free plugin and behaves the same with The Plus Addons for Elementor Pro installed or not.
Limitations
- The Blur slider stops at 10 px. Larger values, such as the 35 px often used for neumorphism, rendered correctly on the page when set.
- The class name must be typed without a leading dot, even though the placeholder shows one.
- Text and drop shadows may not show in the Elementor editor canvas (we saw this on the Heading and Image widgets). Check them in Preview or on the published page.
- There are no responsive controls: the same shadows are used on desktop, tablet and mobile.
Troubleshooting
I can’t find Advanced Shadows in the Advanced tab
The extension is off. Turn it on under The Plus Addons > Extensions, then reload the editor.
Add Custom Class shows no shadow
Remove the dot from the start of the class name, and check that the class really exists inside the selected widget or container.
The shadow shows on the page but not in the editor
That is expected for text and drop shadows on some widgets. Use Preview to check your design.
