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):
See the Pen Neumorphism cho trang web by haycuoilennao19 (@haycuoilennao19) on CodePen.
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):
See the Pen ví dụ khác về Neumorphism by haycuoilennao19 (@haycuoilennao19) on CodePen.
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.

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.

Examples Of Neumorphism Design
Neumorphism Button CSS

You can check out the results below.
See the Pen Neumorphism transition using Houdini by jakob-e (@jakob-e) on CodePen.
CSS3 Neumorphism Button

You can check out the results below.
See the Pen Neumorphic Buttons by Sikriti Dakua (@dev_loop) on CodePen.
CSS Neumorphism UI
You can check out the results below.
See the Pen A bit of neumorphism by Damir (@drovosek2703) on CodePen.
Neumorphism UI Button Pattern

You can check out the results below.
See the Pen Soft-UI Button Pattern by Tyler Scott Williams (@ogdenstudios) on CodePen.
Neumorphism Button HTML CSS

You can check out the results below.
See the Pen Neumorphism Buttons by zeynep (@zeynepozdem) on CodePen.
Neumorphism Component By HTML CSS

You can check out the results below.
See the Pen neumorph test by victor (@VictorUx) on CodePen.
Neumorphism Menu Icon

You can check out the results below.
See the Pen Neumorphism Button by Sebastian Piskaty (@sebastian-piskaty) on CodePen.
Neumorphism By Shadow

You can check out the results below.
See the Pen Neumorphism: Inner and Drop Shadows by miranda (@mirandalwashburn) on CodePen.
Click Neumorphism Button

You can check out the results below.
See the Pen Neumorphism Button by Naoya (@nxworld) on CodePen.
Neumorphism Social Icon

You can check out the results below.
See the Pen Neumorphism - Animated Social Icons by Jitendra Nirnejak (@nirnejak) on CodePen.
Neumorphism Share Button

You can check out the results below.
See the Pen soft ui design #neumorphism by Igor Milenkovic (@imilenig) on CodePen.
Neumorphism Card CSS3

You can check out the results below.
See the Pen Neumorphism Card UI by Shivnath (@shivnath25) on CodePen.
Neumorphism Card Menu CSS

You can check out the results below.
See the Pen Neuphormism UI by Susanna Nevalainen (@zuzze) on CodePen.
Neumorphism Social Icon Button CSS

You can check out the results below.
See the Pen Neumorphism | Soft UI by Atul Prajapati (@atulcodex) on CodePen.
Neumorphism Search Box CSS3

You can check out the results below.
See the Pen Neumorphism Search Bar by Tran Dinh Trung (@tdtrung17693) on CodePen.
Collection Of Neumorphism Button CSS3

You can check out the results below.
See the Pen Satisfying Button (Neumorphism) by Yuhomyan (@yuhomyan) on CodePen.
Neumorphism Card HTML5 CSS3

You can check out the results below.
See the Pen Neumorphism UI // Card by Cosimo Scarpa (@coswise) on CodePen.
Neumorphism Submit Button

You can check out the results below.
See the Pen Simple & Minimal Neumorphic Buttons by Shinobis (@Shinobis) on CodePen.
Neumorphism Menu CSS3

You can check out the results below.
See the Pen Neumorphism menu by Wouter (@wouterXD) on CodePen.
Login Form Neumorphism CSS

You can check out the results below.
See the Pen neumorhism login form by Animation Bro (@animationbro) on CodePen.
Neumorphism Gradient Loader

You can check out the results below.
See the Pen Neumorphism Gradient Loader by samuel garcia (@sam_garcia2) on CodePen.
Music Player Neumorphic

You can check out the results below.
See the Pen Music Player Neumorphic (Soft UI) Style by Dilum Sanjaya (@dilums) on CodePen.
Responsive Menu Neumorphic

You can check out the results below.
See the Pen Responsive Resaturant Menu by Valentin (@nitnelav) on CodePen.
Summary:
I hope the article will provide you with useful Neumorphic for development, the web and if you have any questions just send an email I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!