Frontend Forever

Neumorphism Effects

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Neumorphism Effects. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

What is neumorphism CSS?

Neumorphism (neomorphism) is a modern way of styling web-elements of any web-page and providing a 3D effect. This animation effect can be easily generated by using HTML and CSS. Box-shadow property of CSS can be used to implemented Neumorphism.

Who invented Neumorphism?

One such trend is Neumorphism. Neumorphism was coined by Jason Kelley on Michal Malewicz's medium article “What's the next UI design trend?”. Soon this created the buzz in the design community and designers started drooling over it.

Where is neumorphism used?

Neumorphism is meant to be soft on the eyes. It calls for minimal color contrast and very few pops of color. Logically, designers are free to apply neumorphism in any degree they see fit – not having to implement the style in its entirety. Many choose to apply neumorphism to their cards, but keep classic buttons.

Neumorphism as a user interface

The marriage of minimalism with skeuomorphism is already recognized as the defining feature of neumorphism. To think of it that way makes sense. Compare the austere aesthetic of Material Design with the skeuomorphism's hyper-realistic appearance. Consider Apple's design principles from 2007 to 2012 and compare them to the interfaces it develops today as an alternative.

As a relatively new design trend, "neumorphism," often spelled "neomorphism," has recently drawn a lot of attention. Its distinguishing style is provided by its realistic-looking, minimalist user interface, hence the name. Since the trend's name was given to it in a UX Collective article from December 2019, various design and development groups have been actively discussing it, frequently with different perspectives. Chris mocked it on Twitter. Adam Gibel created an online generator for it. Developers, designers, and UX specialists are debating the usability, accessibility, and utility of this design trend.

It's clear that it struck a chord in the community.

To illustrate, let's jump into the Neumorphism pool.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background: #e5e5e5;
}
.container{
	width: 1250px;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 100px;
	margin-left: 50px;
}
.frame{
	width: 200px;
	height: 200px;
	background: #e5e5e5;
	position: absolute;
	left: 90px;
	box-shadow: inset 7px 7px 5px gray,
				inset -7px -7px 5px white,
				7px 7px 5px gray;
}
.frame1{
	width: 160px;
	height: 160px;
	background: #e5e5e5;
	position: absolute;
	left: 20px;
	top: 20px;
	box-shadow: inset 7px 7px 5px gray,
				inset -7px -7px 5px white,
				7px 7px 5px gray;
}
.frame2{
	width: 120px;
	height: 120px;
	background: #e5e5e5;
	position: absolute;
	left: 40px;
	top: 40px;
	box-shadow: inset 7px 7px 5px gray,
				inset -7px -7px 5px white,
				7px 7px 5px gray;
}
.frame3{
	width: 80px;
	height: 80px;
	background: #e5e5e5;
	position: absolute;
	left: 60px;
	top: 60px;
	box-shadow: inset 7px 7px 5px gray,
				inset -7px -7px 5px white,
				7px 7px 5px gray;
}
.frame:hover{
	background: red;
	box-shadow: none;
}
.frame1:hover{
	background: blue;
	box-shadow: none;
}
.frame2:hover{
	background: green;
	box-shadow: none;
}
.frame3:hover{
	background: red;
	box-shadow: none;
}
button{
	width: 150px;
	height: 50px;
	color: black;
	font-weight: bold;
	font-family: Arial;
	font-size: 17px;
	position: absolute;
	border-radius: 20px;
	outline: none;
	border: none;
	background: #e5e5e5;
	box-shadow: -5px -5px 8px white,
						5px 5px 8px gray;
	left: 400px;
	top: 270px;
}
button:hover{
	background: #e5e5e5;
	border: none;
	position: absolute;
	box-shadow: inset -7px -7px 10px white,
				inset 7px 7px 10px gray;
}
.circle{
	width: 200px;
	height: 200px;
	position: relative;
	margin-left: 230px;
	box-shadow: -7px -7px 10px white,7px 7px 10px gray;
	border-radius: 50%;
}
.circle1{
	width: 170px;
	height: 170px;
	position: absolute;
	left: 16px;
	top: 14px;
	box-shadow: inset -7px -7px 10px white,
				inset 7px 7px 10px gray;
	border-radius: 50%;
}
.circle:hover{
	width: 300px;
	height: 300px;
	position: absolute;
	box-shadow: -7px -7px 10px white,inset -7px -7px 10px white,
				7px 7px 10px gray, inset 7px 7px 10px gray;
}
.circle1:hover{
	width: 270px;
	height: 270px;
	position: absolute;
}
.circle,.circle1:hover{
	transition: 4s;
}
.box{
	width: 200px;
	height: 200px;
	position: absolute;
	left: 1070px;
	background: #e5e5e5;
	border-radius: 40px;
	box-shadow: -7px -7px 10px white,inset -7px -7px 10px white,
				7px 7px 10px gray,inset 7px 7px 10px gray;
}
.box1{
	width: 150px;
	height: 150px;
	position: absolute;
	left: 25px;
	top: 25px;
	background: #e5e5e5;
	border-radius: 40px;
	box-shadow: -7px -7px 10px white,inset -7px -7px 10px white,
				7px 7px 10px gray,inset 7px 7px 10px gray;
}
img{
	width: 120px;
	height: 120px;
	position: absolute;
	border-radius:40px;
	left: 18px;
	top: 18px;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Neumorphism Effects

About this Code

What is neumorphism CSS?

Who invented Neumorphism?

Where is neumorphism used?

Neumorphism as a user interface

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever