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.
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.
- Get your values: a generator such as neumorphism.io gives you the background colour and the two
box-shadowvalues to copy.
This is the kind of result we are after:
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-iconin 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.
On the published page the icon now looks raised out of the background:
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.
