---
title: "Advanced Shadows: Settings Overview"
url: https://theplusaddons.com/docs/advanced-shadows-settings-overview/
date: 2023-12-27
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/Advanced-Shadows_-Settings-Overview-1024x536.jpg
word_count: 836
---

# Advanced Shadows: Settings Overview

## 

- Advanced Shadows en The Plus Addons for Elementor permite apilar tantos box shadows, text shadows y drop shadows como se quiera en cualquier widget o container, y cambiar a otro conjunto al pasar el cursor.
- Advanced Shadows forma parte del plugin gratuito The Plus Addons for Elementor y se activa en The Plus Addons > Extensions, dentro del grupo Plus Effects.
- Advanced Shadows se configura en Elementor desde la pestaña Advanced, justo debajo de Custom CSS, y permite usar Box Shadows, Text Shadows y Drop Shadows en el mismo elemento.
- Advanced Shadows aplica sombras como CSS en la página publicada, pero no tiene controles responsive y el Blur slider se detiene en 10 px, aunque valores mayores como 35 px se renderizan correctamente en la página.

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

[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**.

## 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 Advanced Shadows section in the Advanced tab, with the Box Shadows, Text Shadows and Drop Shadows switches](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-enable.webp)

## 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.

![Three icons on a grey page: a round shadowed icon, a flat icon, and an icon inside a square shadowed box](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-result-apply-to.webp)

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

## Related Docs

- [How to Add Neumorphism Effect in Elementor?](https://theplusaddons.com/docs/neumorphism-effect-in-elementor/)- [How to Change Text Shadow on Hover in Elementor?](https://theplusaddons.com/docs/change-text-shadow-on-hover-in-elementor/)- [How to Change Drop Shadow on Hover in Elementor?](https://theplusaddons.com/docs/change-drop-shadow-on-hover-in-elementor/)

## Frequently Asked Questions

**Q: Why do my shadows only show one layer in Elementor?**
A: Elementor’s built-in shadow controls only give you one shadow per element, so stacked depth effects need a different approach. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH lets you stack multiple box, text, and drop shadows on the same widget or container, which is what makes neumorphism-style depth possible. That matters because each shadow item is drawn together, with the first item on top.

**Q: How do I make Advanced Shadows work on an icon instead of the whole widget?**
A: Use Add Custom Class when the shadow needs to hit an inner element rather than the widget box itself. The page’s example shows elementor-icon targeting the round icon shape, while Default applies the shadow to the widget’s full square box. One gotcha: type the class name without the leading dot, or nothing gets applied.

**Q: Which shadow type should I use for cards, text, or images?**
A: Box Shadows fit cards, buttons, containers, and neumorphism because they wrap the element’s box. Text Shadows are for headings and other text because they sit behind letters. Drop Shadows follow the visible shape, so they work better for transparent PNG, SVG and WebP images, plus icons. The Plus Addons for Elementor gives all three in the same extension, so one element can combine them if needed.

**Q: Why does my shadow look different on hover?**
A: The hover list replaces the normal list instead of adding to it. That means any shadow you want to keep visible on hover has to be repeated in the Hover tab. This is useful when you want a clean state change rather than a stacked effect that keeps growing as the pointer moves over the element.

**Q: Why can’t I see Advanced Shadows in the Advanced tab?**
A: The extension is probably still turned off. Advanced Shadows sits under The Plus Addons > Extensions in the Plus Effects group, and it stays inactive until you switch it on and reload Elementor. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH ships it as part of the free plugin, so activation is the key step here.

**Q: Do Advanced Shadows work well for neumorphism and responsive layouts?**
A: They work well for neumorphism because multiple shadows can be stacked together and larger blur values like 35 px rendered correctly on the page even though the Blur slider stops at 10 px. The tradeoff is responsiveness: there are no responsive controls, so desktop, tablet and mobile all use the same shadows. For design checks, Preview or the published page is more reliable than the editor canvas.