How to create Glassmorphism Credit Card | HTML & CSS Project - Frontend everything

Glassmorphism Credit Card using HTML and CSS - Frontend Everything

Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Glassmorphism Credit Card with the help of HTML and CSS Only! 😍

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Glassmorphism Credit Card that you can use in your own blog project. So it will look attractive.

Let's start making these amazing Glassmorphism Credit Card Using HTML & CSS step by step.

Video of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

In HTML we have used header and div tags for the containers.

 <link rel="preconnect" href="https://fonts.gstatic.com">  
 <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap" rel="stylesheet">  
 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap" rel="stylesheet">  
 <div class="circles">  
  <div class="circle circle-1"></div>  
  <div class="circle circle-2"></div>  
 </div>  
 <div class="card-group">  
  <div class="card">  
   <div class="logo"><img src="https://raw.githubusercontent.com/dasShounak/freeUseImages/main/Visa-Logo-PNG-Image.png" alt="Visa"></div>  
   <div class="chip"><img src="https://raw.githubusercontent.com/dasShounak/freeUseImages/main/chip.png" alt="chip"></div>  
   <div class="number">1234 5678 9012 3456</div>  
   <div class="name">SHOUNAK DAS</div>  
   <div class="from">10/19</div>  
   <div class="to">06/21</div>  
   <div class="ring"></div>  
  </div>  
 </div>

After the HTML we will design the Full Screen Menu with CSS..

Output till now

CSS🎈( step - 2)

 :root {  
  font-size: 24px;  
 }  
 body {  
  background: #1488cc;  
  /* fallback for old browsers */  
  background: linear-gradient(to left, #283593, #1976d2);  
  height: 100vh;  
  font-family: "Josefin Sans", sans-serif;  
 }  
 /* Background circles start */  
 .circle {  
  position: absolute;  
  border-radius: 50%;  
  background: radial-gradient(#006db3, #29b6f6);  
 }  
 .circles {  
  position: absolute;  
  height: 270px;  
  width: 450px;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
 }  
 .circle-1 {  
  height: 180px;  
  width: 180px;  
  top: -50px;  
  left: -60px;  
 }  
 .circle-2 {  
  height: 200px;  
  width: 200px;  
  bottom: -90px;  
  right: -90px;  
  opacity: 0.8;  
 }  
 /* Background circles end */  
 .card-group {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
 }  
 .card {  
  position: relative;  
  height: 270px;  
  width: 450px;  
  border-radius: 25px;  
  background: rgba(255, 255, 255, 0.2);  
  backdrop-filter: blur(30px);  
  border: 2px solid rgba(255, 255, 255, 0.1);  
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);  
  overflow: hidden;  
 }  
 .logo img,  
 .chip img,  
 .number,  
 .name,  
 .from,  
 .to,  
 .ring {  
  position: absolute; /* All items inside card should have absolute position */  
 }  
 .logo img {  
  top: 35px;  
  right: 40px;  
  width: 80px;  
  height: auto;  
  opacity: 0.8;  
 }  
 .chip img {  
  top: 120px;  
  left: 40px;  
  width: 50px;  
  height: auto;  
  opacity: 0.8;  
 }  
 .number,  
 .name,  
 .from,  
 .to {  
  color: rgba(255, 255, 255, 0.8);  
  font-weight: 400;  
  letter-spacing: 2px;  
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);  
 }  
 .number {  
  left: 40px;  
  bottom: 65px;  
  font-family: "Nunito", sans-serif;  
 }  
 .name {  
  font-size: 0.5rem;  
  left: 40px;  
  bottom: 35px;  
 }  
 .from {  
  font-size: 0.5rem;  
  bottom: 35px;  
  right: 110px;  
 }  
 .to {  
  font-size: 0.5rem;  
  bottom: 35px;  
  right: 40px;  
 }  
 /* The two rings on the card background */  
 .ring {  
  height: 500px;  
  width: 500px;  
  border-radius: 50%;  
  background: transparent;  
  border: 50px solid rgba(255, 255, 255, 0.1);  
  bottom: -250px;  
  right: -250px;  
  box-sizing: border-box;  
 }  
 .ring::after {  
  content: "";  
  position: absolute;  
  height: 600px;  
  width: 600px;  
  border-radius: 50%;  
  background: transparent;  
  border: 30px solid rgba(255, 255, 255, 0.1);  
  bottom: -80px;  
  right: -110px;  
  box-sizing: border-box;  
 }

Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

If you found any value in this blog you can support me by buying me a coffee.

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.

More blogs you should give a check!

Pexels Website Clone With HTML< CSS and Javascript
Word Counter In Angular JS
Responsive Newsletter in CSS
Dark And Night mode toggle button in javascript
Best Youtube Channels For Learning Coding
Top-notch Project ideas For HTML< CSS< Javascript
Best Platform To sell your Website Templates
Google Homepage Clone With Html and CSS

Create Product Card using HTML and CSS - Frontend Everything

Glassmorphism Credit Card using HTML and CSS - Frontend Everything