I have no talent at all. I am only passionate about understanding

Article

How To Design Neumorphism And 20 Neumorphism Examples For Websites

How To Design Neumorphism And 20 Neumorphism Examples For Websites


September, 25 2021

Today we're going to learn how to design components in style Neumorphism. It aims at minimalism by combining simple colors with shadow effects in CSS. Now, let's go to find out!

How to Create HTML CSS Neumorphism Effect

Before I go 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];

Here I would like to explain a bit:

  • horizontal offset: Horizontal offset of the shadow
  • horizontal offset: The vertical offset of the shadow
  • 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.

And to make it easy to use, let's create a square with Neumorphism design!

HTML

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

CSS

/*Thiết lập style  và chỉnh vị trí của phần tử trong body*/
body {
  align-items: center;
  background-color: DodgerBlue;
  display: flex;
  height: 100vh;
  justify-content: center;
}
/*Tạo Neumorphism cho đối tượng bằng các thuộc tính CSS*/
.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):

See the Pen Neumorphism For Website by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

As you can see in the above example, creating a component with Neumorphism 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):

See the Pen ví dụ khác về Neumorphism by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Next we will go into learning how to create a hover effect for the Neumorphism button!

HTML

 <div class="btn">Bạn hãy hover vào nút này</div>

CSS

/*Thiết lập style và chỉnh vị trí cho phần tử trong body*/
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 100vh;
    background: #f2f3f7;
}
/*Thiết lập style cho nút*/
.btn{
    padding: 10px 30px;
    width: 10%;
    height: 5%;
    left: 20%;
    text-transform: uppercase;
    font-weight: bold;
    text-align:center;
    letter-spacing: 2px;
    color: #5a84a2;
    font-size: 16px;
    text-decoration: none;
    border-radius: 660px;
    background: linear-gradient(45deg, #dadbde, #ffffff);
    box-shadow: 9px -9px 18px #c9cacd,
        -9px 9px 18px #ffffff;
}
/*Tạo hiệu ứng hover cho nút*/
.btn:hover{
box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

And the result of the above code you can see below:

See the Pen mdPWyaj by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Online Neumorphism Effect Tool

In addition to coding by hand, we can also use the neumorphism.io tool to set Neumorphism-style component design with ease. What I like about this tool is that you only need Customize the values of the provided properties and then see the results immediately.

trang web neumorphism.io

Link

Neumorphism UI Library

Neumorphism UI is a library built on top of Bootstrap with components provided available and in the style of Neumorphism. It's completely free to use but if you want more If you have more components for your website, you have to buy it for about $69.

Neumorphism UI

Link

Other Examples of Neumorphism

Neumorphism Button CSS

Neumorphism Button CSS

Check out the results below!

See the Pen Neumorphism transition using Houdini by jakob-e (@jakob-e) on CodePen.

Link

CSS3 Neumorphism Button

CSS3 Neumorphism Button

Check out the results below!

See the Pen Neumorphic Buttons by Sikriti Dakua (@dev_loop) on CodePen.

Link

CSS Neumorphism UI

Check out the results below!

See the Pen A bit of neumorphism by Damir (@drovosek2703) on CodePen.

Link

Neumorphism UI Button Pattern

Neumorphism UI Button Pattern

Check out the results below!

See the Pen Soft-UI Button Pattern by Tyler Scott Williams (@ogdenstudios) on CodePen.

Link

Neumorphism Button HTML CSS

Neumorphism Button HTML CSS

Check out the results below!

See the Pen Neumorphism Buttons by zeynep (@zeynepozdem) on CodePen.

Link

Neumorphism Component By HTML CSS

Neumorphism Component Bằng HTML CSS

Check out the results below!

See the Pen neumorph test by victor (@VictorUx) on CodePen.

Link

Neumorphism Menu Icon

Neumorphism Menu Icon

Check out the results below!

See the Pen Neumorphism Button by Sebastian Piskaty (@sebastian-piskaty) on CodePen.

Link

Neumorphism By Shadow

Neumorphism By Shadow

Check out the results below!

See the Pen Neumorphism: Inner and Drop Shadows by miranda (@mirandalwashburn) on CodePen.

Link

Click Neumorphism Button

 Click Neumorphism Button

Check out the results below!

See the Pen Neumorphism Button by Naoya (@nxworld) on CodePen.

Link

Neumorphism Social Icon

Neumorphism Social Icon

Check out the results below!

See the Pen Neumorphism - Animated Social Icons by Jitendra Nirnejak (@nirnejak) on CodePen.

Link

Neumorphism Share Button

Neumorphism Share Button

Check out the results below!

See the Pen soft ui design #neumorphism by Igor Milenkovic (@imilenig) on CodePen.

Link

Neumorphism Card CSS3

Neumorphism Card CSS3

Check out the results below!

See the Pen Neumorphism Card UI by Shivnath (@shivnath25) on CodePen.

Link

Neumorphism Card Menu CSS

Neumorphism Card Menu CSS

Check out the results below!

See the Pen Neuphormism UI by Susanna Nevalainen (@zuzze) on CodePen.

Link

Neumorphism Social Icon Button CSS

Neumorphism Social Icon Button CSS

Check out the results below!

See the Pen Neumorphism | Soft UI by Atul Prajapati (@atulcodex) on CodePen.

Link

Neumorphism Search Box CSS3

Neumorphism Search Box CSS3

Check out the results below!

See the Pen Neumorphism Search Bar by Tran Dinh Trung (@tdtrung17693) on CodePen.

Link

Collection Neumorphism Button CSS3

Collection Neumorphism Button CSS3

Check out the results below!

See the Pen Satisfying Button (Neumorphism) by Yuhomyan (@yuhomyan) on CodePen.

Link

Neumorphism Card HTML5 CSS3

Neumorphism Card HTML5 CSS3

Check out the results below!

See the Pen Neumorphism UI // Card by Cosimo Scarpa (@coswise) on CodePen.

Link

Neumorphism Submit Button

Neumorphism Submit Button

Check out the results below!

See the Pen Simple & Minimal Neumorphic Buttons by Shinobis (@Shinobis) on CodePen.

Link

Neumorphism Menu CSS3

Neumorphism Menu CSS3

Check out the results below!

See the Pen Neumorphism menu by Wouter (@wouterXD) on CodePen.

Link

Login Form Neumorphism CSS

Login Form Neumorphism CSS

Check out the results below!

See the Pen neumorhism login form by Animation Bro (@animationbro) on CodePen.

Link

Summary:

Through this, I hope the article will provide you with useful Neumorphics for development, website and if you have any questions just send an email I will respond as soon as possible. Hope you continue Please support the website so that I can write more good articles. Have a nice day!