How to add custom trending Neomorphic effect for your elements using Elementor Pro

Do you know what is Neomorphism may be many of you already aware about this.Today i am going to elaborate something new and trendy and this is the effect called Neomorphism.

So I am going to recreate these two particular layouts with these two different Neomorphistic looks and I’m gonna explain you how I applied them using Elementor Pro. So, if you are using Elementor free, well bad news! But for Elementor Pro users there is a super easy way to apply this effect for your layout for your elements! But i am gonna be using some custom CSS, so there are no setting in the Elementor editor that allows you to do that. This is why we’re going to need to apply some custom CSS, but all that we’ll be using is only a box shadow. Box shadow is supported across all the browsers, but if you want to make sure that you also provide the same experience for the users with older versions of some browsers, you can also use mods and WebKit prefixes for your code! 

I will provide you with this article and you can simply copy and paste the essential code which you can use it in your own editor. Now, for those of you who haven’t heard of this trend, let’s actually have a look at what it is, and what it looks like, and what it’ll started with. Well, actually, this trend started on Dribbble, and it all started from there – all designers started picking it up, and making some concept designs using this, using this particular look, and a lot of people Do like it,but even more people Do see a huge problem with these kind of look because of how little contrast it actually has with at the background. So, the key components to a Neomorphistic – I’m not sure if it’s an actual word – but he the key components to a Neomorphism look is that your object has to have the same color as your background and you also use two kinds of box shadows, so you add two layers of box shadows – one is darker – which is like a shadow – and the other is lighter – which is more like a highlight.

This is how i create this kind of look,like this object is a part of your background. And it’s kind of protruding from the surface. Essentially, these are all very basic Bevel and Emboss effects and they’re available in a new software, and this kind of look has been around quite a while. And the fact that they just pick it up and call it “Neomorphism”is something new for the interfaces, for the UI design, it is something new, but not completely new.

So, in this case with this card, it actually does work because it does create this distinction between the card and the background. But, it is not crucial for us to see this contrast. What you shouldn’t do is apply this effect to a button and hope that is going to be enough for the user to understand it’s a clickable button, because here you see he’s not using the slug, these shadows for this button, this pattern – it’s clear that this is a button, this is a clickable button, it has a traditional button look. Another example, this one, is a pretty good design. You see it is working with these cards, but I wouldn’t recommend doing it with things like buttons. Maybe, icons or other clickable objects that have to be clear for the user that there are objects that they can interact with. So, for the cards, maybe for some graphic elements, it’s a great and very interesting way to spice up your design, but not for the elements that are interactive. So, now let’s jump back to our Elementor editor, and see how we can create this effect ourselves and apply it to our objects. The thing is that as I’ve said, it is great to use for cards and for some minimalist layouts like these. So, these are the looks we will be going for.

I will delete all of the effects that I have already on these cards, so I can create the effect from scratch. So, there we are. Here’s the look that you get with all the default settings and the thing is that my background here is not a completely white

It is something grayish, by the way, the widget that I’m working with today is simply a post widget in Elementor Pro. Here it is. And,to start recreating the Neumorphistic look what we need to do is to – first,pick the CSS class of our cards. It will be way easier to do if we start out when we can clearly see where our cards are, where we can clearly distinguish between the card and the background.

I’m going to jump to the preview right now, and I’m going to click f12 so it opens my inspector and I’m gonna grab this”Inspect” thingy, and I’m going to hover over one of my cards and click on it. So, what we have to do here is to find where the class of one individual card is. Here we are. And you have to make sure that you target one, only one post and not the container of your layout. And this is what we have. Once I click on it, it selects the entire class and we actually have to grab it and copy it – the entire thing – just to make sure that we target this specific set of cards on this specific page. And I just copy it and you get back to your editor. You make sure you select your widget! Go to ‘Advanced’ -& ‘Custom CSS’ and just paste it in here. And leave it there just for now. And now we’re going to proceed to all the other things we have to sort out before we start writing the code for the Neumorphism look

Alright, so what do we need to do here first thing is to change the background of the card so it matches the color of the background on our page in the actual container. Well, to do that let’s go to ‘Box’ -& ‘Background color’ . Now, the next thing we need to do is to round our corners. And we’ll do it using Border Radius ’15’. Now, the last thing wehave to do is to disable the box shadow for your objects, if you have one.Because this setting will overwrite everything that you write in the custom CSS tab. So, if you have it enabled – simply disable it and make sure you get no shadow near objects. Now, back to ‘Advanced’ and in custom CSS, we already have this class pasted. Now, let’s start writing the actual styles for our box shadows. AsI’ve already said, you can simply copy the code snippet down below and paste it in your own editor.

Ist Effect

.your-class {
-webkit-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

-moz-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

}

.your-class:hover {
-webkit-box-shadow:
15px 15px 20px rgba(0,0,0,0.1),
-15px -15px 20px #fff;

-moz-box-shadow:
15px 15px 20px rgba(0,0,0,0.1),
-15px -15px 20px #fff;

box-shadow:
15px 15px 20px rgba(0,0,0,0.1),
-15px -15px 20px #fff;

}

2nd effect

.your-class {
-webkit-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

-moz-box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

box-shadow:
5px 5px 10px rgba(0,0,0,0.1),
-5px -5px 10px #fff ;

}

.your-class:hover {
-webkit-box-shadow:
inset 10px 10px 20px rgba(0,0,0,0.05),
inset -15px -15px 20px #fff;

-moz-box-shadow:
inset 10px 10px 20px rgba(0,0,0,0.05),
inset -15px -15px 20px #fff;

box-shadow:
inset 10px 10px 20px rgba(0,0,0,0.05),
inset -15px -15px 20px #fff;

}

First, we’ll write the shadow which was darker and then – the settings for the highlight. It is black and it has only10% opacity, but you can increase it if you want. If this is the look you’re going for but I wouldn’t recommend doing that so. Basically, this is what it is and now let’s do the same thing. But let’s add prefixes, so if you copy and paste this code – this is what its gonna look like. But now let’s also write the styles for the hover state. So, this is how you do it – simply add a semicolon and hover after it. And then you copy the box shadow thing here and what we need to do is to just increase this value a little bit, so it seems like the card is floating above the background a little bit higher. Done! Now, let’s test it out. There we are. Now, same thing – just copy and paste the same lines with the two different prefixes, so we also make sure it works for the other browsers. And it’s also considered proper CSS, if you bring the standard property below the properties with the prefixes. So, that’s it with the first look.

Let’s move on to the second one. Now, our second case is this count down timer and we’re gonna apply a different style to it. Now, as you remember, we gotta go and find out what the class of each of these cards is. So, let’s jump back to the preview. Now, let’s inspect this element and what I will do is copy it here, up to this part which seems to be the exact class of the objects that I need and I’ll make sure this widget is selected and go to Custom CSS and paste it here. What we’ve got to do here -border IDs. Bring it up to 15 and change the background color so it matches the color for our background. As for the border, what we could do is to try an experiment and leave one or two pixel white border here and see what difference it makes and how different the effect will look.

Now in custom CSS I’ll simply paste the same styles that I had for the cards above for the normal state. It’s not going to be different at all, it’s going to be the same settings, the same look, but for the hover state it’s gonna be actually a little different. Now, let’s copy the class, state ‘hover’ and write the following. ‘Inset’ means that our shadow is now going to be inside of its container and I’m also going to bring the opacity down to 5%. There we have it! I don’t know about you but this border is not really working for me. May be something like this, but okay let’s get rid of it entirely. This is how you can create this sort of look with Elementor page builder and a tiny bit of custom CSS. Just make sure you target the right class of the right objects on your page and you shouldn’t have any problem. Now, in the mobile and tablet view, it’s also performing quite well and there also shouldn’t be any device-specific issues. Now you know how to bring a little bit of Neomorphism to your design and I hope this article is helpful for you and you learn something new .