Neumorphism is the hottest design trend of the year. You can see designers follow this trend everywhere.
Many big brands have already started incorporating neumorphism in their designs. From mobile apps to web UI, you can find designers go crazy over this trend.
But is neumorphism possible in Elementor? Yes, it is!
With Elementor’s custom CSS, you can easily create neumorphic shadows in Elementor.
But what about neumorphism effect in Elementor without custom CSS? Now, that’s something interesting. Isn’t it?
In this tutorial, I’ll show you how to create neumorphic shadows in Elementor without custom CSS.
But before we begin this tutorial, let’s understand what neumorphism is.
What is Neumorphism (Soft UI)?
Neumorphism is an iteration on the previously popular Skeumorphism style. Skeumorphism has been around for a long time and has been widely used by Apple in its user interfaces.
Skeumorphism tries to emulate real-world objects in the digital world as you can see from the example below:
However, neumorphism is a bit different from that.
It’s a blend of skeumorphism, flat design, and realism. A neumorphic element extrudes from the background giving it a 3D effect like it can be pressed or pushed back.
If you compare a neumorphic card with a material design card, you’ll be able to clearly understand that neumorphism has a pretty low contrast and subtle appearance.
Creating neumorphic effects is not as difficult as it looks. The concept is very simple:
You need three shades to achieve neumorphism. These three shades are:
- An element and background of the same color
- A light color for light shadow
- A dark color for dark shadow
Let’s see how you can do this in Elementor.
How To Create Neumorphism Effect in Elementor Without Custom CSS?
Achieving neumorphism effect in Elementor is possible with custom CSS.
But it can be confusing at times and also requires you to have a basic understanding of CSS.
The method I’m about to share with you doesn’t require writing custom CSS at all.
For that, all you need to do is to download this Elementor add-on:
Step 1. Download and Install Designer Powerup for Elementor
Designer Powerup for Elementor is an Elementor add-on plugin created by us here at Pixify. There are already many Elementor add-ons that bring countless widgets to Elementor.
But Designer Powerup is unique from all of them.
Why?
Because this plugin extends the core functionality of the Elementor page builder. It has some really advanced design features that will save your time and help you avoid writing CSS for creating stunning effects such as neumorphic style.
Step 2. Create a Section in Elementor
Once you’ve installed Designer Powerup for Elementor, go ahead and create a new page with Elementor.
Add a section with the background color #E0E5EC.
Step 3. Add a Button Widget
Add a button widget to this section. Give it the same color as the section background color (#E0E5EC).
For now, the outline of the button won’t be visible. But don’t worry about it.
Step 4. Enable Multi-Layer Shadows from the Powerup Tab
If you have Designer Powerup installed on your website, you’ll see a new Powerup tab in Elementor right next to the Advanced tab.
Navigate to this tab and you’ll find a Powerup named Multi-Layer Shadows. Enable this Powerup.
You’ll see a text field named Child Selector. This field basically wraps the effect to the selector you define. With no child selector defined, the effect will be applied to the whole widget area.
To apply the shadow effect just to the button, add ‘.elementor-button’ in the Child Selector field.
Here’s how you can find the CSS selector for any element.
Step 5. Create Two Shadows For The Button
This is where the magic begins!
With the Normal tab selected in the multi-layer shadow, click on the ‘Add Item’ button. This will add a new shadow layer to the button.
Here are the settings you need to apply to the shadow layer:
Horizontal: -2
Vertical: -2
Blur: 5
Spread: 0
Color: #FFFFFF
Position: Out
Similarly, add another shadow layer to the button. Here are the style settings for this layer:
Horizontal: 2
Vertical: 2
Blur: 5
Spread: 0
Color: #A3B1C6
Position: Out
Step 5. Style The Button
Your button is almost ready!
It just needs a few more customizations to make achieve the perfect neumorphic effect.
First, change the text color of the button to dark grey. I’m using the color #A5A5A5. I’ve also applied a border-radius of 10px.
Here’s how the button looks now:
Congratulations! You created an awesome neumorphic shadow effect in Elementor.
You can tweak around with the colors and settings more to find the perfect blend.
But we’re not done here. Let’s also create a neumorphic hover effect for the button.
Step 6. Create Two Shadows For The Hover Effect
The process of creating neumorphic shadows for the hover effect is the same as creating for the normal state.
But the colors are now inverted.
Add the first shadow layer with the following settings:
Horizontal: 2
Vertical: 2
Blur: 5
Spread: 0
Color: #A3B1C6
Position: In
The second shadow layer should be as follows:
Horizontal: -2
Vertical: -2
Blur: 5
Spread: 0
Color: #FFFFFF
Position: In
The neumorphic hover button will look like this:
How To Use Neumorphism in Web Design?
So now you know how to create neumorphism effect in Elementor. But how do you use it?
Neumorphism is very popular in mobile UI design but not much in web design. Still, there are many ways you can use neumorphism on your website.
Here are some examples for inspiration.
Hero Section
You can create a minimal hero section using neumorphism as shown in the example above.
With Designer Powerup for Elementor, you can create neumorphic shadows for any elements allowing you to explore different possibilities.
Tip: You can create neumorphic shadow effects for your headings in the hero section.
Pricing Tables
Pricing tables with neumorphic style look gorgeous as you can see from the above example.
You can go a step further and use different colors for the buttons to make them stand out more.
Cards
You can create a neumorphic effect for any card element on your website. Whether it’s your blog post page or something else, you can experiment with unique styles.
Forms
Lastly, you can create forms with a neumorphic style. As you can see from the above example, you can increase the horizontal and vertical values of the shadow and increase the blur.
And to make the form stand out, you can use a bright color for the CTA button to establish a striking contrast.
Conclusion
Neumorphism is a trend that’s inspired a lot of designers to try something new with their designs.
Even though many designers are not fond of this trend, it’s still being used by many designers and big brands.
And now that you can create this style easily with Elementor, you can push the boundaries of the websites you design.
If you have any questions regarding this tutorial, feel free to ask them in the comments below.
6 Responses
Hello Ahfaz, thank you very much for this stellar tutorial !
As a begginer on CSS, Elementor & Powerup, I’m wondering how can I apply the same neumpormic effect with different colors and to different widgets (like image-box) ?
Kind regards,
Nadir
Glad you found it helpful!
For applying the effect on different widgets, you just need to add the name of the CSS selector of the widget in the CSS Selector field.
Hi Afhaz,
Thanks for this awesome tutorial! I recently started learning Elementor and I’ve been looking for Neumorphism Elementor tutorials for a long time, and yours is definitely one of the best so far. Also, I recently came across this tutorial and a video and I’d really appreciate if you could voice your opinion about it
https://www.templatemonster.com/blog/neomorphism-elementor-pro-tutorial/
Should we always use custom CSS to create neumorphism effect in Elementor? Your tutorial seems so effortless!
You can use custom CSS but it’s time-consuming. With Designer Powerup, you can do that with just a few clicks.
I tried to use it on the cards or sections unfortunately it doesn’t work in spite of me entering correct class. I am using elementor
Do you have the ‘Apply on Child Element’ toggle enabled?