How to Create a Neumorphic Style Website in Elementor

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;
}

Don’t forget to subscribe to our channel!

See Also:

Chapters:
00:00 - Intro to Neumorphism/Soft UI
01:12 - Neumorphic style with Elementor
03:40 - Using pre-styled images
04:23 - Image boxes
05:50 - Adding a CSS effect

[Elementor]

UPDATE: Custom Positioning is now called Position and can be found under the Advanced > Layout tab.

[apakoseezekiel]

Men you guys are just killing it all no gap nor loopholes whatsoever am proud to be a USER

[vnikyt]

To those complaining about her pronunciation of the word “button”, she’s clearly not American, so she’s under no obligation to pronounce “button” the American way. She’s already doing a pretty good job faking an American accent to make American users more comfortable, and the tutorial is pretty useful and well executed, so maybe cut her some slack?

[smartlivingwithmuneeb]

This is exactly I'm looking for.Thankyou so much elementor.

[MdBiplobbd-nygy]

I am using those effect in my runing project! Thanls elementor

[promotechtips]

very cool, just added this effect to my social icons - I'm so fancy now!

[clementyo]

Great tutorial for non techies 😁👍
Just missing the sound music background 😅

[NickJourdan]

Wow, she has nice voice also the content is nicely done and well explained. Thank you

[shubhampunj]

Awesome, is this page available to view on any demo link?

[UnitopChina]

in 00:29, I can see the section of this video "Join our below the header, the "Email" and "Join" is perfectly done, could you explain in details how? Thanks for your help.

[motisho]

Unfortunately on a white background the code does not look like in the video, do you have the option to send me a code that will be displayed on a white background?

[thejuankurtis]

Nice video. @Elementor are you going to do a new Elementor Pro series? There are so many cool new features. I'd love a newer series for building a site using Elementor Pro.
I'd love to see what you could do with a music & video heavy website...like say an artist or music producer.

[DidierSajnoWebDesign]

At 9:00 you add 40px padding to the right and 10px to the left and paste that style to the other 3 columns. Therfore the 1 column (far left) has 10px padding left and column 4 (far right) has 40px right padding. This method means that the columns don't align properly to the overall page margins. You can see clearly at 9:20 the right margin is much wider than the left. How do you handle column spacing properly?

[dariakulsha]

that cool video! thanx a lot! BUT! I have no "positioning" tab in advanced settings part... Why it is so and what can I do to have it?

[UnitopChina]

Thanks for the amazing tutorial, I managed to do that sucessfully. But to make the whole website unified, I have an urgent question: How to make the button on the Form Widget same Neumorphic style? Now all the buttons on my site is neumorphic style except the button on Form widget. Please help urgently! Thanks for your kind help.

[bySterling]

Mad Skill$! I would ❤️ if us Pro members could import these amazing modern blocks and pages!! 🙏🏻📱💻🖥🎉🌎✌🏻

[jaceejoef]

6:49 why did you use icon box instead of image box?

[zyedonty]

May We have the images? Please, give a download link of these images that have been used in this tutorial...

[vnikyt]

Great tutorial. But I thought it was advisable to use EM instead of pixels for responsive design? Your buttons (and elements in your templates) are in pixels. Is there a reason for this? Thanks!

[colbertntunyu]

is there a tutorial on the element scroll effects ?