Neumorphism (or soft UI) is an aesthetic where elements appear to be extruded from the background rather than sitting on top of it. It relies entirely on specific multi-layered CSS dropshadows.

The Secret Recipe for Neumorphism

You need two shadows: a light shadow on the top-left, and a dark shadow on the bottom-right. The background color of the element must exactly match the background of the page!

body {
  background-color: #E0E5EC;
}

.neumorphic-button {
  background-color: #E0E5EC; /* Matches body perfectly */
  border-radius: 12px;
  box-shadow: 
    9px 9px 16px rgb(163,177,198,0.6), 
    -9px -9px 16px rgba(255,255,255, 0.5);
}

Creating the Pressed State

When the button is clicked or active, we change the shadows from standard box-shadow to inset box-shadow to make it look physically pushed in.

.neumorphic-button:active {
  box-shadow: 
    inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6),
    inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

Open the Live Demo to see this technique applied to a full working grid calculator!