---
title: "How to Add Neumorphism Effect in Elementor?"
url: https://theplusaddons.com/docs/neumorphism-effect-in-elementor/
date: 2023-12-27
modified: 2026-04-10
author: "Aditya Sharma"
description: "Are you looking to add neumorphism effect to elements in your Elementor website? This design style brings visual depth and realism to user interfaces with a combination of light and..."
image: https://theplusaddons.com/wp-content/uploads/2023/12/How-to-Add-Neumorphism-Effect-in-Elementor_-1024x536.jpg
word_count: 581
---

# How to Add Neumorphism Effect in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Advanced Shadows extension allows users to add multiple shadows to create a neumorphism effect.
- Users can apply box shadows to an element by selecting 'Add Custom Class' and entering a class name, such as .elementor-icon.
- The box shadow settings include options for inset and outset shadows, with customizable values for X, Y, Blur, and Color.

Are you looking to add neumorphism effect to elements in your Elementor website? This design style brings visual depth and realism to user interfaces with a combination of light and shadow.

With the Advanced Shadows extension from The Plus Addons for Elementor, you can easily add multiple shadows to an element in Elementor to create a neumorphism effect.

*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/)*

You can play with [this tool](https://neumorphism.io) to create a neumorphism effect, here you can find the exact box-shadow values.

Let’s say we want to create this neumorphism effect.

![neumorphsm effect example](https://theplusaddons.com/wp-content/uploads/2023/12/neumorphsm-example-1024x482.png)

Now to add a neumorphism effect follow the steps - 

1. Add a container or section with the background color of *#e0e0e0* as per the example code.

2. Then add a widget.

> *Note: You can also add box shadows to a container as well.*

For instance, we’ll use the Icon widget with the Stacked view and do the necessary styling adjustments.

3. Then go to **Advanced > Advanced Shadows** and enable the **Box Shadows** toggle.

4. From the **Apply to** dropdown, you have to select where you want to apply the box shadow. Here you’ll find two options - 

**Default** - This will apply the box shadow to the widget container or the default container.

**Add Custom Class** - With this option, you can target an element by class name within a widget or container.

For our example, we want to apply the box shadow to the icon stacked background only, so we’ll select Add Custom Class and add *.elementor-icon* class in the **Enter Custom Class Name** field.

> *Note: You can use the browser Developer tools to find the element’s class name.*

5. Then in the **Normal** tab you can add a box shadow by clicking on the **+Add Item** button.

In the **Label** field, you can add a name to the box shadow.

From the **Type** dropdown, you can select the drop shadow type. Here you’ll find two options - 

**Inset** - For adding inner box shadow.

**Outset** - Fro adding box shadow outside.

As per the example code, we’ll set the type to Inset here.

From the **X** field, you can move the shadow horizontally. 

From the **Y** field, you can move the shadow vertically. 

From the **Blur** field, you can add blur to the box shadow.

From the **Spread** field, you can spread the shadow.

As per our example code, we’ll add the values of 18, 18 and 35 to the X, Y and Blur fields respectively and we’ll leave the Spread field blank since it doesn’t have any value.

In the **Color** field, you have to add the shadow color. We’ll add the color as per the example code.

6. Following the same process click on the **+Add Item** button to add the second shadow value as per the example code.

> *Note: In a similar process you can add multiple normal box shadows to an element.*

In the **Transition css** field, you can add a transition value. It is useful if you are looking to add a hover animation.

In the **Hover** tab, you can enable the **Hover Box Shadows** toggle to add different sets of box shadows to animate the box shadow on the mouse hover.

Since we are not animating the box shadow we’ll leave it blank.

Now you should have a similar neumorphism effect as the above example.

![advanced shadows box shadows demo](https://theplusaddons.com/wp-content/uploads/2023/12/advanced-shadows-box-shadows-demo.png)

Read more about, [How to Change Drop Shadow on Hover in Elementor.](https://theplusaddons.com/docs//change-drop-shadow-on-hover-in-elementor/)

## Frequently Asked Questions

**Q: What should I do if the neumorphism effect isn't displaying correctly?**
A: If the neumorphism effect isn't showing as expected, check the box shadow settings in the Advanced Shadows section. Ensure that you've selected the correct class name in the 'Apply to' dropdown. For instance, if you're targeting an icon, make sure to use '.elementor-icon' as the custom class. Additionally, verify that the background color of your container is set to #e0e0e0, as this is crucial for the effect.

**Q: Can I use the neumorphism effect on mobile devices?**
A: The neumorphism effect can be applied to elements in Elementor, including those viewed on mobile devices. However, be mindful of how shadows may appear on smaller screens. Test the design on various devices to ensure the effect maintains its visual appeal. The Plus Addons for Elementor allows for customization that can help optimize the appearance across different screen sizes.

**Q: What are the best box shadow settings for achieving a neumorphism effect?**
A: For a convincing neumorphism effect, use inset shadows with specific values. As per the example, set the X and Y values to 18 and the Blur value to 35. Leaving the Spread field blank can also enhance the effect. Experiment with these values to achieve the desired depth and realism. The Plus Addons for Elementor's Advanced Shadows extension makes it easy to adjust these settings.

**Q: How do I add multiple shadows for a more complex neumorphism effect?**
A: To create a more intricate neumorphism effect, you can add multiple box shadows by clicking the +Add Item button in the Normal tab. Each shadow can have its own settings, allowing for layered effects. For example, you might set one shadow as inset and another as outset, adjusting their X, Y, and Blur values to create depth. This technique is supported by The Plus Addons for Elementor, enhancing your design flexibility.

**Q: What happens if I forget to set the background color for the container?**
A: If the background color of the container is not set to #e0e0e0, the neumorphism effect may not appear as intended. The light and shadow interplay relies on this specific background to create the illusion of depth. Without it, the shadows might blend into the background, losing their visual impact. Always ensure the background color matches the example for optimal results.