Neumorphism | the best neumorphism css card design using html css

Table of Contents

Neumorphism | the best neumorphism css card design using html css

Hello… Welcome to codewithrandom Today I am showing how to create NEUMORPHISM CSS CARD DESIGN USING HTML CSS.first you should know that what is Neumorphism. Neumorphism is a modern way to styling a webpage and it have 3D effect.If you want to create this page then you should do step by step.

Code:-

HTML CODE:-

Here we are adding div classic card and header and we are adding image in card.

 <div class="card">  
    <div class="header">  
     <img src="person1.jpg" alt="" />  
    </div>

The div class is body and in body the heading will be <h2> and <p>

 <div class="body">  
     <h2>  
      Joy  
     </h2>  
     <p>  
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem  
      odio tenetur earum voluptas corporis deleniti quasi repellendus  
      maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident  
      dolore iste tempore eos.  
     </p>  </div>

The div class is footer and button is read more in footer and we want to finish first card.

<div class="footer">  
     <button>Read More</button>  
    </div>  
   </div>

For second and third card we want to follow the same process like first card.

 
   <div class="card">  
    <div class="header">  
     <img src="person2.jpg" alt="" />  
    </div>  
    <div class="body">  
     <h2>  
      Evelyn  
     </h2>  
     <p>  
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem  
      odio tenetur earum voluptas corporis deleniti quasi repellendus  
      maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident  
      dolore iste tempore eos.  
     </p>  
    </div>  
    <div class="footer">  
     <button>Read More</button>  
    </div>  
   </div>  
   <div class="card">  
    <div class="header">  
     <img src="person3.jpg" alt="" />  
    </div>  
    <div class="body">  
     <h2>  
      Mark  
     </h2>  
     <p>  
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem  
      odio tenetur earum voluptas corporis deleniti quasi repellendus  
      maxime, quae amet ipsam voluptatibus vero, reiciendis nam provident  
      dolore iste tempore eos.  
     </p>  
    </div>  
    <div class="footer">  
     <button>Read More</button>  
    </div>  
   </div>

HTML OUTPUT:-

CSS CODE:-

In css they are making html code more acttractive and responsive. they added box size,font,background etc as given in code.

 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: "Roboto", sans-serif;  
  display: flex;  
  min-height: 100vh;  
  align-items: center;  
  justify-content: center;  
  background: #b19cd9;  
 }  
 .card {  
  position: relative;  
  background: #b19cd9;  
  margin: 30px;  
  height: 350px;  
  width: 220px;  
  border-radius: 20px;  
  transition: 0.2s linear;  
  box-shadow: -6px -6px 25px 0 rgba(205, 177, 255, 0.8),  
   6px 6px 25px 0 rgba(0, 0, 0, 0.2);  
 }  
 .card:hover {  
  transform: scale(0.99);  
  box-shadow: inset -6px -6px 25px 0 rgba(205, 177, 255, 0.9),  
   inset 6px 6px 25px 0 rgba(0, 0, 0, 0.1);  
 }  
 .header {  
  position: absolute;  
  height: 70px;  
  width: 70px;  
  left: 50%;  
  top: 15px;  
  transform: translateX(-50%);  
  border-radius: 50%;  
  box-shadow: inset -6px -6px 10px 0 rgba(205, 177, 255, 0.8),  
   inset 10px 10px 10px 0 rgba(0, 0, 0, 0.2);  
  transition: 0.4s linear;  
 }  
 .header:hover {  
  box-shadow: -6px -6px 10px 0 rgba(205, 177, 255, 0.8),  
   10px 10px 10px 0 rgba(0, 0, 0, 0.08);  
  transform: translateX(-50%) scale(1.1);  
 }  
 .header img {  
  position: absolute;  
  height: 90%;  
  width: 90%;  
  border-radius: 50%;  
  object-fit: cover;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
 }  
 .body {  
  position: absolute;  
  top: 100px;  
  padding: 15px;  
  color: white;  
 }  
 .body h2 {  
  font-size: 20px;  
  text-transform: uppercase;  
  margin-bottom: 10px;  
 }  
 .body p {  
  font-size: 10px;  
  line-height: 20px;  
 }  
 .footer {  
  position: absolute;  
  bottom: 10px;  
  width: 100%;  
  height: 60px;  
 }  
 .footer button {  
  position: absolute;  
  border: none;  
  background: #b19cd9;  
  color: white;  
  padding: 8px 25px;  
  border-radius: 10px;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  box-shadow: inset -6px -6px 10px 0 rgba(205, 177, 255, 0.8),  
   inset 6px 6px 10px 0 rgba(0, 0, 0, 0.1);  
  transition: 0.4s linear;  
 }  
 .footer:hover button {  
  transform: translate(-50%, -50%) scale(1.2);  
  box-shadow: -6px -6px 10px 0 rgba(205, 177, 255, 0.7),  
   6px 6px 10px 0 rgba(0, 0, 0, 0.1);  
 }