A Debit Card UI Design In Pure CSS | Glassmorfism

Glassmorfism debit card is a realistic frosted glass debit and credit card template with face animation when hovering over. Written in pure CSS / CSS3. Inspired by the popular Glassmorphism design concept.

debit card html css, debit credit card ui html, debit card form using html css javascript, debit card html, payment by debit card pages using javascript

How to make use of it:

1. Add entrance & again info to the card.

<div class="card">
  <div class="face front">
    <h3 class="debit">Debit Card</h3>
    <h3 class="bank">VISA</h3>
    <img class="chip" src="./assets/chip.png" alt="chip">
    <h3 class="number">0000 0000 0000 0000</h3>
    <h5 class="valid"><span>VALID <br /> THRU</span><span>10/28</span></h5>
    <h5 class="card-holder">DebitCard</h5>
  </div>
  <div class="face back">
    <div class="blackbar"></div>
    <div class="cvvtext">
      <div class="white-bar"></div>
      <div class="cvv">123</div>
    </div>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ex nec nulla posuere sollicitudin. Proin nec orci at est pellentesque malesuada eu a neque. Maecenas quis porttitor odio. Praesent faucibus dui nisl, ac luctus mauris pulvinar in. Morbi vitae ante a nunc ullamcorper rutrum. Donec non interdum purus, gravida elementum mi.
    </p>
  </div>
</div>

2. The required CSS/CSS3 types for the Glassmorphism Debit/Credit Card.

.card {
  position: relative;
  width: 508px;
  height: 314px;
  transform-style: preserve-3d;
  perspective: 500px;
  z-index: 2;
  
}

.card .face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(28px);
  transform-style: preserve-3d;
  transition: 1s;
  backface-visibility: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card:hover .face.front {
  transform: rotateY(180deg);
}

.card .face.back {
  transform: rotateY(180deg);
}

.card:hover .face.back {
  transform: rotateY(360deg);
}

.card .face.front::before {
  content:'';
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.5;
}

.card .face.front::after {
  content:'';
  position: absolute;
  bottom: 40px;
  right: 80px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.7;
}

.card .face.front .debit {
  position: absolute;
  left: 40px;
  top: 30px;
  color: #fff;
  font-weight: 500;
}

.card .face.front .bank {
  position: absolute;
  right: 40px;
  top: 25px;
  color: #fff;
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
}

.card .face.front .chip {
  position: absolute;
  top: 80px;
  left: 50px;
  max-width: 64px;
}

.card .face.front .number {
  position: absolute;
  bottom: 130px;
  left: 40px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 6px;
  font-size: 18px;
  text-shadow: 0 2px 1px #0005;
  font-family: 'Orbitron', sans-serif;
}

.card .face.front .valid {
  position: absolute;
  bottom: 90px;
  left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 300;
  line-height: 1em;
  text-align: right;
}

.card .face.front .valid span:last-child {
  margin-left: 20px;
  font-size: 16px;font-weight: 400;
  letter-spacing: 2px;
}

.card .face.front .card-holder {
  position: absolute;
  bottom: 40px;
  left: 40px;
  color: #fff;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.card .face.back .blackbar {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 60px;
  background: #000;
}

.card .face.back .cvvtext {
  position: absolute;
  top: 120px;
  left: 30px;
}

.card .face.back .cvvtext .white-bar {
  position: relative;
  width: 400px;
  height: 40px;
  background: #fff;
  margin-top: 5px;
}

.card .face.back .cvvtext .cvv {
  position: relative;
  top: -35px;
  left: 345px;
  background: #ccc;
  color: #111;
  width: 50px;
  height: 30px;
  font-weight: 600;
  letter-spacing: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .face.back .text {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  color: #fff;
  font-size: 10px;
  line-height: 1. 4em;
  font-weight: 300;
}

Glassmorphism Debit/Credit Card, Glassmorfism Debit Card Plugin/Github


See Demo And Download

Official Website(biancagualter): Click Here

This superior jQuery/javascript plugin is developed by biancagualter. For extra advanced usage, please go to the official website.

Share