MASIGNASUKAv102
6510051498749449419

Fall in love with Neumorphism - New design trend

Fall in love with Neumorphism - New design trend
Add Comments
Tuesday, March 31, 2020
Modern user interface designers are giving a lot of options to the users to experience the best. And neumorphism is one such new design practice trending all over the designer's community.  Neumorphism is created from skeuomorphism which is mostly observed in Apple design, and some people do believe that it could be the design system for IOS.

Fall in love with Neumorphism - New design trend html css
Google search redesign by Arabi Ishaque

Let's design something . ..

In this design, we use the same color for the background and the component.
body{background:#efefef;}
Now let's create a button.
<button>🤗Lovely design</button>
button {
  padding: 1.5em 1em;
  background: #efefef;
  margin-left: 30px;
  border: none;
  border-radius: .5rem;
  color: #444;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .1rem;
  text-align: center;
  outline: none;
  cursor: pointer;
  transition: .4s ease-in-out;
  box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
              -6px -6px 10px rgba(255, 255, 255, .5),
              6px 6px 8px rgba(255, 255, 255, .075),
              6px 6px 10px rgba(0, 0, 0, .15);
}

Here box-shadow property plays a crucial role in differentiating components from the background having the same color, so we will be using light shadow.
Now when the button is clicked, the shadow must be applied inset.
button:active {
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
              inset -2px -2px 4px rgba(255, 255, 255, .5),
              inset 2px 2px 2px rgba(255, 255, 255, .075),
              inset 2px 2px 4px rgba(0, 0, 0, .15);
}

Try experimenting with the box-shadow property.
To make it look better I have applied the hover shadow effect and aligned it using flexbox and some little tweaks.

Run this pen to see it live.

See the Pen
Neumorphism love
by Adarshreddy adelli (@adarshreddyadelli)
on CodePen.
Also read CSS Selectors Cheat Sheet.
Adarshreddy Adelli

As an Engineering Lead with deep expertise in Artificial Intelligence, Cybersecurity, and Systems Architecture, I guide teams in building innovative, secure, and scalable solutions.I am passionate about tackling challenging technical problems, fostering engineering excellence, and delivering solutions that balance innovation, security, and performance. I actively share knowledge through blogging and community engagement, contributing to the advancement of AI and cybersecurity practices.