---
title: "How to Add Neumorphism Effect in Elementor?"
url: https://theplusaddons.com/docs/neumorphism-effect-in-elementor/
date: 2023-12-27
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Neumorphism makes an element look pressed out of, or into, the page. It uses one light shadow and one dark shadow on an element that has the same colour as..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Add-Neumorphism-Effect-in-Elementor_-1024x536.jpg
word_count: 584
---

# How to Add Neumorphism Effect in Elementor?

## 

- Advanced Shadows from The Plus Addons for Elementor stacks a light shadow and a dark shadow, letting Elementor build a neumorphism effect without code because Elementor’s box shadow control holds only one shadow.
- The setup uses the free The Plus Addons for Elementor plugin, with Advanced Shadows in the Plus Effects group under The Plus Addons > Extensions, and it stays off until it is turned on.
- The icon example uses a #e0e0e0 background, an elementor-icon custom class without the leading dot, and two Normal-tab shadows: Outset 18/18/35/0 #bebebe and -18/-18/35/0 #ffffff.

Neumorphism makes an element look pressed out of, or into, the page. It uses one light shadow and one dark shadow on an element that has the same colour as its background.

Elementor's box shadow control holds only one shadow. With the **Advanced Shadows** extension from The Plus Addons for Elementor you can stack both shadows and build the effect without 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/).*

***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**.- **Get your values:** a generator such as [neumorphism.io](https://neumorphism.io) gives you the background colour and the two `box-shadow` values to copy.

This is the kind of result we are after:

![A neumorphism example: a soft raised shape on a light grey background](https://theplusaddons.com/wp-content/uploads/2023/12/neumorphsm-example-1024x482.png)

## Add the Neumorphism Effect

- Give the container a background colour, for example **#e0e0e0**.- Add a widget inside it. This example uses the **Icon** widget with **View** set to **Stacked** and, on the **Style** tab, **Primary Color** (the circle behind the icon) set to the same **#e0e0e0**.- Go to **Advanced > Advanced Shadows** and switch on **Box Shadows**.- Set **Apply to** to **Add Custom Class** and type `elementor-icon` in **Enter Custom Class Name**, so the shadow sits on the round icon rather than the square widget. 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** for the dark shadow: **Type** **Outset**, **X** 18, **Y** 18, **Blur** 35, **Spread** 0, **Color** #bebebe.- Click **+ Add Item** again for the light shadow: **X** -18, **Y** -18, **Blur** 35, **Spread** 0, **Color** #ffffff.- Update the page and open it.

![Box Shadows applied to the elementor-icon class, with the Dark shadow item open showing X 18, Y 18 and Blur 35](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-box-shadows.webp)

On the published page the icon now looks raised out of the background:

![A round grey icon with a light shadow top-left and a dark shadow bottom-right, looking raised](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-result-neumorphism.webp)

![A neumorphism box shadow demo made with Advanced Shadows](https://theplusaddons.com/wp-content/uploads/2026/09/advanced-shadows-box-shadows-demo.webp)

## Raised or Pressed

| Look | Type | Values |
| ---- | ---- | ------ |
| Raised (as above) | **Outset** on both items | Dark shadow bottom-right, light shadow top-left |
| Pressed in | **Inset** on both items | The same values; the shadows are drawn inside the shape |

To animate between the two, add the raised set on the **Normal** tab, switch on **Hover Box Shadows** on the **Hover** tab, add the pressed set there, and put a value such as `all .3s linear` in **Transition css**.

## How It Behaves

- The effect only works when the element and its background have the same colour.- Both items are drawn together as one shadow list.- The same shadows are used on every device size.

## Limitations

- The **Blur** slider stops at 10 px. In our test a 35 px blur showed in the number box next to the slider and rendered correctly on the page.- The class name must be typed without the leading dot.

## Troubleshooting

### No shadow appears on the icon

Check that the class name has no dot at the start. With `.elementor-icon` nothing is drawn.

### The shadow is square instead of round

**Apply to** is on **Default**, which shadows the whole widget box. Switch to **Add Custom Class** and target `elementor-icon`.

![Three icons: shadow on the elementor-icon class, no shadow with a dotted class name, and a square shadow with Default](https://theplusaddons.com/wp-content/uploads/2026/09/advshadows-result-apply-to.webp)

## 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 Change Text Shadow on Hover in Elementor?](https://theplusaddons.com/docs/change-text-shadow-on-hover-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a neumorphism effect in Elementor?**
A: The key requirement is the Advanced Shadows extension from The Plus Addons for Elementor, and it must be installed and activated. The page says it is part of the free plugin and works the same with Pro installed. You also need a widget or container with a background color, plus two box-shadow values from a generator such as neumorphism.io. That matters because neumorphism depends on stacking a light shadow and a dark shadow on the same-colored surface.

**Q: Why does the neumorphism effect only work when the element matches its background color?**
A: Neumorphism is built to look like the element is pressed into or raised out of the page, so the element and its background need the same color for the shadows to read correctly. The page says both shadows are drawn on an element that has the same colour as its background. If those colors differ, the illusion breaks because the shadow contrast no longer sits on a flat-looking surface.

**Q: How do I make the shadow follow a round icon instead of the whole widget box?**
A: The shadow has to target a custom class on the icon itself, not the default widget box. The page uses Apply to set to Add Custom Class and then targets elementor-icon so the shadow sits on the round icon rather than the square widget. The important gotcha is to type elementor-icon without the leading dot, because .elementor-icon does not draw anything.

**Q: Why is my neumorphism shadow square instead of round?**
A: That usually happens when Apply to is left on Default, which shadows the whole widget box instead of just the icon shape. The fix in this tutorial is to switch Apply to to Add Custom Class and target elementor-icon. That keeps The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH Advanced Shadows aligned with the circular icon area instead of wrapping the outer container.

**Q: Can I animate between raised and pressed neumorphism states on hover?**
A: The page shows a hover transition setup for that exact effect. Put the raised shadows on Normal, then enable Hover Box Shadows and add the pressed set there, using a transition value such as all .3s linear in Transition css. That gives you a clean state change instead of a hard swap, which matters because both shadows are treated as one list.

**Q: What are the main limitations of Advanced Shadows for this effect?**
A: Two limits stand out: the Blur slider stops at 10 px, even though the tutorial test used 35 px successfully by typing it in, and the class name must be entered without a leading dot. The page also says both shadows are drawn together as one shadow list and that they use the same values on every device size. Those details matter if you are trying to match a specific neumorphism generator output.