Neumorphism - CSS

Neumorphism is a design trend that adds depth and realism to user interfaces by resembling physical objects. In this article, we will discuss how to implement neumorphism using CSS.

Getting Started

To create a neumorphic design, first, you need to prepare an HTML markup that represents your user interface. For example, suppose you want to create a neumorphic button. In that case, you could use the following HTML code:

<button class="neumorphic-button">Click me</button>

Next, let's define a basic CSS style for our button:

.neumorphic-button {
  width: 200px;
  height: 50px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 30px;
  box-shadow: 10px 10px 30px #bebebe,
              -10px -10px 30px #ffffff;
}

Here, we've defined a button that has a width of 200 pixels, a height of 50 pixels, a grayish background color, no border, and a border radius of 30 pixels. We've also added a box-shadow that creates a neumorphic effect.

The two box-shadow values represent the inner and outer shadows of the button. The first box-shadow value creates a dark shadow in the lower right corner and a light shadow in the upper left corner, while the second value creates a light shadow in the lower right corner and a dark shadow in the upper left corner.

Enhancing the Neumorphic Effect

To enhance the neumorphic effect, we can modify the box-shadow value by adding more layers. We can also add transitions and animations to create a more interactive and dynamic user interface. Additionally, we can use JavaScript to create custom neumorphic effects based on user actions, such as hovering or clicking on an element.

Here's an example of a neumorphic button with an enhanced box-shadow value:

.neumorphic-button {
  width: 200px;
  height: 50px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 30px;
  box-shadow: 10px 10px 30px #bebebe,
              -10px -10px 30px #ffffff,
              -10px 10px 30px #bebebe,
              10px -10px 30px #ffffff;
  transition: all .2s ease-in-out;
}

.neumorphic-button:hover {
  transform: scale(1.1);
  box-shadow: 15px 15px 40px #bebebe,
              -15px -15px 40px #ffffff,
              -15px 15px 40px #bebebe,
              15px -15px 40px #ffffff;
}

Here, we've added two more box-shadow layers to the button and defined a transition that makes the button scale up by 10% when hovered over. We've also modified the box-shadow value for the hover state to create a more impactful neumorphic effect.

Conclusion

Neumorphism is a design trend that can add depth and realism to your user interfaces using CSS. By using box-shadow and other CSS properties, you can create neumorphic effects that are both attractive and functional. Remember that neumorphism is just one of many design trends, and it's up to you to decide whether and how to use it in your projects.

References

• Neumorphism in User Interfaces
• How to Create Neumorphism Effects with CSS