In this tutorial, we’ll learn how to add neumorphic style effects to enhance our website designs in Elementor. As a bonus, we’ll also use CSS code to really add that wow factor.
Neumorphism, or soft UI, is a design style that combines highlights and shadows, to make elements look as if they’re emerging from the page.
The tutorial will cover:
✔︎ Styling buttons for a soft UI effect
✔︎ Using pre-styled images to complement layouts
✔︎ Using image boxes to style layouts
✔︎ Reusing styles for a more efficient workflow
✔︎ Adding CSS to enhance
✔︎ And much more!
CSS Code Snippet:
selector {
box-shadow: 3px 3px 7px rgba(174, 174, 192, 0.25), -3px -3px 7px rgba(255, 255, 255, 0.7), inset 3px 3px 3px rgba(255, 255, 255, 0.7), inset -3px -3px 3px rgba(174, 174, 192, 0.25);
border-radius: 30px;
}
Hey everyone! Shiri here, from Elementor.
In today’s video, we’ll see how to build a neumorphic style website in Elementor.
Neumorphism, also known as soft UI, is a design style that combines highlights and shadows, to make elements look as if they’re emerging from the page.
We’ll cover three ways to add Neumorphic style to our website: First, we’ll create and style a button with a soft UI, and add decorative elements around it. Next, we’ll build off that to add and style these image boxes, and last, we’ll kick it up a notch, and add a bit of custom CSS code to these images, for an extra sleek look.
Feel free to use the timestamps if you wish to skip ahead, at any time.
Let’s begin with this button in the hero section. As you can see, it uses two opposing shadows, to create a neumorphic effect. You’ll notice that we’re using a light grey background to make sure the white highlight stays visible. Let’s see how we can create this effect using only Elementor.
First, I’ll delete the button, so we can start from scratch. Now let’s drag in a new button. We’ll change the text and head over to Style. Since our default typography and color already look great, let’s move on to the border radius.
We’ll round it by changing it to 100 pixels, and set the padding.
Looking better already!
Now it’s time to create that neumorphic look! We’ll start by adding a white box-shadow first. Open the box shadow settings and choose a light color. Then define the properties for your shadows. I’m using minus ten (-10) both for horizontal and vertical axis, as well as a 15 pixels blur effect.
Great!
To add the second shadow on the opposite sides of the button, we’ll go to the Advanced tab and under Border, add a new box shadow using a darker color. For the horizontal and vertical settings, we’ll use the opposite values, and reuse the same value for the blur setting.
Notice that the second box shadow is seen here?
That’s because each box shadow applies to a different part of the widget. The first box shadow we added was applied only to the button itself, but this shadow is applied to the entire widget’s frame. In order for the second shadow to apply only to our button, we’ll need to tweak the widget’s shape and size.
First, add a border radius to match the button’s rounded corners.
Then, under Positioning, set the widget’s width to Inline..
Now that we have our desired effect, let’s center the button, by clicking on the column and setting the horizontal align to center.
We can make this button more engaging by adding a hover effect.
Click the button, go to style options and set our desired effect.
Perfect!
To add more complex elements with a similar style, we can use images. I’ve already created this one in photoshop.
We’ll drag in an image widget, select an image, and set its size to Full. Then in Style, set the width to 100 VW, or viewport width. Now we’ll just duplicate it, and drag it above to create this decoration around our content, and… this section is done!
We’ve created and styled a striking button and added images to our design. This website is already starting to look more polished, but we can add even more to it!
For our second example, we’ll recreate this layout. We could drag in separate image, heading, and text widgets, and style them one by one. But to save time, we’ll drag in this single image box widget, which contains all the elements we need, and helps keep our layout optimized.
We’ll choose an image to fit our design, and update the title and description. And let’s not forget to set the Image position!
Next, we’ll go to the style tab, and make a few tweaks to set the spacing and width of the widget. We’ll also use global styles to get the result we need for our design.
Vertically align the text to the middle, and…Another component, done!
Below, we need another similar element. We’ll right click, duplicate and update any needed settings.
We saved the best part for last!
Using style options and images is pretty cool, but we can take this effect to the next level, by using a few lines of CSS code. Don’t worry, we’ll keep it simple, and provide you with the code in the description.
We have this section with 4 columns. We’ll combine the neumorphic style button and apply something new, to achieve this look.
We’ll delete this section and start from scratch, but before we do, let’s go over it and see what we need to do to recreate it.
First, we have this image with the neumophic style. Then we have a heading, text and a button.
Okay, we’re good to go. Let’s delete this section and add a new section with 4 columns.
We’ll start simple, with the heading and text. Instead of using a heading widget and a text editor widget, we’ll add an Icon box.. and remove the icon.
Now we’ll update the title and description. We can’t see the title yet, because in this case its default color is the same as our background, but we’ll be able to update that in the Style tab. So let’s go to style, and while we’re here, set all the style options we need. We just achieved the same layout – using fewer widgets! Amazing.
Next, we’ll need to add a button here. Wait, don’t drag in a new button. , All we have to do is duplicate the button we created before. It’s a simple matter of copy.. And paste!
And now update the content.
Now for the main event – the image.
We’ll add an image widget, and choose the image we need.
We need some space above and below the image,, so go to Advanced, and add padding to the top and the bottom of the widget.
Great!
Now at the bottom, we have this tab, where we can add custom CSS code!
Type in “Selector”, to target the widget we’re working on. Then open a curly bracket and paste in this code, which as you’ll recall, can be found in the video description
We’ll hide the panel to preview our changes.
Next, we’ll delete all the empty columns, and duplicate our finished one.
Wait… These columns are too close together. Don’t worry, we don’t need to start over from scratch. We can add some space to one of them, and then copy its style and paste it on the remaining columns. Cool, huh?
Now we only need to update the content and this layout is done.
The Final step is to add some space between these titles and the images by adding some margin to it.
And viola!
We now have a sleek neumorphic styled website, Made with Elementor! Well, and a few lines of code.
How will you use this style in your next project? Share your thoughts in the comments below.
Like this video? Give it a thumbs up, so we know what kind of content you’d like to see more of.
Want to keep learning? We’ve got you covered!
Check out these videos for more Elementor tutorials.
Until next time, keep creating!
