23 Neumorphism Design UI For Website

5 min readDec 25, 2021

Today we will learn how to design components in the style of Neumorphism by combining simple colors with shadow effects in CSS.

Create a Neumorphism HTML CSS Effect

Before going into this, I would like to briefly explain the main attribute to create this effect is box-shadow with the following general syntax:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

horizontal offset: Horizontal offset of the shadow
horizontal offset: Shade vertical offset
blur radius : Opacity of the shadow
spread radius : If the value of this property is greater than 0, the shadow size will be increased, otherwise will reduce the size.(You can choose to use or remove this element)
color: Color of the shadow

And to design Neumorphism for components in the website, we need to note some of the following characteristics:

Shadows: Objects must have two shadows (one light and one dark)
Background colors: The object's background color must be the same as the parent element's background color.
Edges: The edge of the Neumorphism object will have to be rounded.
Borders: The outline of the object should be set to be subtle, with contrast high.

HTML

<div class="doi_tuong"></div>

CSS

body {
   align-items: center;
   background-color: DodgerBlue;
   display: flex;
   height: 100vh;
   justify-content: center;
 }
 .doi_tuong{
   align-items: center;
   background-color: DodgerBlue;
   box-shadow: 
     12px 12px 16px 0 rgba(0, 0, 0, 0.25),
     -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
   border-radius: 50px;
   display: flex;
   height: 200px;
   justify-content: center;
   margin-right: 4rem;
   width: 200px;
 }

And the final result you see below (You should switch to 0.5x screen mode to see it better):

Link

As you can see in the above example, creating a component with a Neumorphism design is not difficult. The important thing is that we need to know how to set the correct value for the attribute box-shadow. Here are two more examples of Neumorphism (You switch to 0.5x screen mode to see more clearly):

Link

Online Neumorphism Effect Tool

In addition to hand-coding, we can also use the neumorphism.io tool to design component in the style of Neumorphism easily. What I like about this tool is that you just need to customize it Adjust the values of the provided properties and then see the results immediately.

Link

Neumorphism UI Library

Neumorphism UI is a library built on Bootstrap with pre-provided components and designed in Neumorphism style. It is completely free to use, but if you want to add more components to your website, you have to buy it for about $ 69.

Link

Neumorphism Button CSS