Hello friends, in this article, you will learn how to create Neomorphism Circle Card using HTML and CSS.I have shared another snippet based on how to create a Neomorphism Login Form with HTML and CSS . In this tutorial, I have created a Neomorphism Circle Card design using HTML and CSS, If you like this article, please also subscribe my YouTube channel – Code Info
Neomorphism
Neomorphism, or Soft UI, is a visual style that mixes background colours, shapes, gradients, highlights, and shadows to make sure photograph severe buttons and switches. All that allows attaining a soft, extruded plastic look, and almost 3D styling. Neomorphism is a visual style that blends techniques from skeuomorphism, realism, and flat design.
Box-Shadow
You may like this:
- Neumorphism Social Media icons with HTML and CSS
- Create Login form page with HTML and CSS
- Animated Search Bar with HTML and CSS
Source Code:
If you like this Neomorphism Circle card design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="card">
<div class="circle-one">
<div class="purpule"></div>
</div>
</div>
<div class="med-card">
<div class="circle">
<img src="images/youtube.png" alt="" />
<h3>Code Info</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error,
quibusdam animi minus natus eveniet illo pariatur. Rerum natus
sapiente labore!
</p>
<div class="dots-items">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<div class="card">
<div class="circle-two">
<div class="yellow"></div>
</div>
</div>
</div>
</body>
</html>
body {
background: rgb(214, 214, 214);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.container {
width: 1000px;
margin: 150px auto;
display: flex;
}
.card {
width: 250px;
height: 250px;
background: rgb(214, 214, 214);
box-shadow: 5px 5px 10px #b6afaf, -5px -5px 10px #ffffff;
border-radius: 50%;
margin-top: 70px;
}
.circle-one {
width: 230px;
height: 230px;
border: 1px solid purple;
border-radius: 50%;
margin: 8px;
}
.purpule {
width: 30px;
height: 30px;
border: 20px solid purple;
border-radius: 50%;
margin: 80px 0 0 80px;
}
.med-card {
width: 400px;
height: 400px;
background: rgb(214, 214, 214);
box-shadow: 5px 5px 10px #b6afaf, -5px -5px 10px #ffffff;
border-radius: 50%;
margin: 0 30px 0 30px;
}
.med-card .circle {
width: 375px;
height: 375px;
border: 1px solid red;
border-radius: 50%;
margin: 12px;
}
.med-card img {
width: 70px;
height: 70px;
margin: 50px 0 0 160px;
}
.med-card h3,
p {
text-align: center;
color: #665e5e;
padding: 0 30px 0 30px;
}
.circle-two {
width: 230px;
height: 230px;
border: 1px solid blue;
border-radius: 50%;
margin: 8px;
}
.yellow {
width: 30px;
height: 30px;
border: 20px solid blue;
border-radius: 50%;
margin: 80px 0 0 80px;
}
.dots-items {
width: 80px;
display: flex;
margin: 50px auto;
}
.dot {
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
margin-left: 10px;
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.
