How to Create a Neumorphic Style Website in Elementor

Описание: 👋🏼 Help us improve by answering this short survey: http://elemn.to/survey-time

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!
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro
Visit the Elementor Academy: https://elementor.com/academy

See Also:
Global Styles -    • How to Use Elementor's Global Colors & Fonts  
Margin and Padding -    • Margin and Padding Basics in Elementor  
Custom CSS -    • How to Add Custom CSS in Elementor [PRO]  

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