How To Create Neumorphism Effect With CSS | HTML CSS Effects | Elementor | Web Cifar 2020

Our Blogs
In this tutorial I’m going to show you how to create a neumorphism effect in CSS. Nowadays you can see that smooth effects in pretty much everywhere. We can use this soft ui effect in websites using CSS, and in this tutorial I’ll show you how you can make it with CSS.

See the Pen Neumorphism CSS Effect by Web Cifar (@Web_Cifar) on CodePen.

CSS CODE:


* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.container {
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 30px;
	background: #dde1e7;
}
.neumorphism-1 {
	height: 250px;
	width: 250px;
	background: #dde1e7;
	border-radius: 5px;
	box-shadow: -3px -3px 7px #ffffffb2, 3px 3px 5px rgba(94, 104, 121, 0.945);
}
.neumorphism-2 {
	margin: 50px;
	height: 250px;
	width: 250px;
	background: #dde1e7;
	border-radius: 5px;
	box-shadow: inset -3px -3px 7px #ffffffb0, inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}
.neumorphism-3 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 250px;
	width: 250px;
	background: #dde1e7;
	border-radius: 50%;
	box-shadow: -3px -3px 7px #ffffffa6, 3px 3px 5px rgba(94, 104, 121, 0.712);
	position: relative;
}
.neumorphism-3:after {
	content: '';
	position: absolute;
	height: 80%;
	width: 80%;
	background-color: transparent;
	border-radius: 50%;
	box-shadow: inset -3px -3px 7px #ffffffb0, inset 3px 3px 5px rgba(94, 104, 121, 0.671);
}

Sharing is caring!

Liked This Article?

Subscribe To Our Newsletter. So You will never Miss Another Update.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares