Neumorphism in Elementor: How To Do It?

neumorphism in elementor
There’s a point that needs to be made about this trend and it is the fact the base of it, which is Skeuomorphism, has been around for a long time. Apple’s mobile devices used it up until the iPhone 7, when they decided to kill it for more flat UI elements, with some slight differences that make this style visually appealing.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

Today, I’m going to talk about trends. Every year new trends in pretty much every industry start to appear and in the design fields, there is no difference. One that’s picking up a lot of steam is Neumorphism (stemming from New Skeuomorphism), also known as Soft UI, which is based on emulating real-world objects in your designs. So, this tutorial will be all about this clean design trend and the two ways you can implement it on your Elementor designs.

 

Where does Neumorphism or Soft UI come from?

There’s a point that needs to be made about this trend and it is the fact the base of it, which is Skeuomorphism, has been around for a long time. Apple’s mobile devices used it up until the iPhone 7, when they decided to kill it for more flat UI elements, with some slight differences that make this style visually appealing.

 

The Neumorphic effects or the elements designed based on Neumorphism have a feeling that they are extruded from the background, like they were being pushed out of it.

 

As many other articles about this hot trend have stated, this Soft UI style really became popular thanks to the Dribbble image you see below by designer Alex Plyuto:

 

neumorphism or soft ui

 

Which got thousands of likes and views in a very short time, setting the path for other designers to adopt it in their designs, as you can see in these other images:

 

On that image, it is clearly noticeable how the elements feel like 3D real life block that you can touch and feel with also a pretty minimal overall style that simply make this an awesome designs. The elements themselves get this effect by using two different shadows, one for highlighting – in this case it looks like the light is coming from the top left – and an actual shadow on the bottom right portion.

 

However, for the effect to work, as the good people from UX Design point out, the background has to be a color different than black or white. This is what they say on the matter:

 

“The effect is pretty easy to achieve by playing with two shadows, one at negative values while the other at positive. But for it to work our background cannot be fully black or fully white. It needs at least a tiny bit of tint so both dark and “light” shadows will be visible. You can use any hue for the background so it can be warmer or colder depending on your choice. But white and dark shadows have to be visible on it, if slightly.”

 

How to implement this Soft UI in Elementor?

Ok, so the CSS to make the elements of your website isn’t that hard or even long. You’re going to have to write a little bit of CSS, or at the least, use the Custom CSS module on Elementor Pro to copy and paste a snippet.

 

The first we’re going to do is create our section. Let’s simply use a full height section and insert the inner section widget removing one of the columns. And let’s add #EFEEEE as a background color to our section.

 

soft ui in elementor

 

Now, for the purposes of this test, I will simply insert the spacer widget, just so I can work with something. Once we have our layout set up, it’s time to move to the style tab. The first thing we’re going to style is the column of the inner section by adding a border radius of 30px and a box shadow of -6 to both the vertical and the horizontal, with a #FFFFFF color and a blur of 16. This covers the highlight, the light shadow that comes in from the top.

 

elementor neumorphism

 

For the dark shadow that comes from the bottom we move to the advanced tab (still on the column), and we add a class that’s not forgettable. Something like neumorphism. On the custom CSS, we add the following snippet to that class:

 

.neumorphism {

      box-shadow: 6px 6px 16px 2px #d1cdc7;

    border-radius: 50px;

}

neumorphism in elementor

 

That’s pretty much it. You’ll notice your column with the spacer on it looks a little bit “embossed”, which is what this whole effect is about.

 

It is not the only way to implement Neumorphism in Elementor, though. With the popularity this trend has gotten over these past couple of months, a user already built a web app called neumorphism.io, where you can set your color and graduate other features to create the CSS for your Neumorphism elements.

 

Neumorphism in Elementor – Final Words

With the amount of people on Dribbble who praised this trend, there have been many others on different social networks who don’t think as highly, claiming it adds no real value to a design and that it isn’t practical.

 

In my opinion, I like it because of the fresh 3D look it gives to the elements, especially on mobile, it can make your website look like a really beautiful app. However, this style of design can easily go wrong when used too much up to the point where the whole thing just looks cluttered and kind of distracting. So, I’d say take it lightly, use it on projects and elements like buttons where it actually makes sense to use it (just as these other effects for buttons).

 

What do you think about Neumorphism? Let me know in the comments!

Improve your Elementor site today!

Want your website to perform better? Are you inching to see those scores on PageSpeed and GTMetrix up? Just want some great Elementor customizations? Well, you’re in luck! We have plans available that fit all situations and budgets to make your site the best it can be!

2 Responses

  1. Hi there
    Thanks for the really simple and useful post.

    I did everything step by step but the one thing that I couldn’t do was the custom css part. I put it in the Custom Css of the column but nothing happens.

    1. Oh, hi Behnam, we’ve been talking over email. Can you send me the URL of the page where you tried to implement the Neumorphic effect.

Leave a Reply

Your email address will not be published. Required fields are marked *

backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want