HTML and CSS Flipping Card UI Design

Let us create a modern and stylish Flipping Card UI Design Website using HTML and CSS.

Here is Demo:

When you Hover on the card, it will flip and show the back of card.

X Post with Live Demo

https://twitter.com/i/status/1708041476285112526

Code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flipping Card UI Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <div class="container">
      <div class="card front-card">
        <header>
          <span class="logo"><img src="images/logo.png">
          <h5>Master Card</h5>
          </span>
          <img src="images/chip.png" class="chip">
        </header>

        <div class="card-details">
          <div class="name-number"> 
            <h6>Card Number</h6>
            <h5 class="number">8080 9990 7878 6969</h5>
            <h5 class="name">Udai Chauhan</h5>
          </div>

          <div class="valid">
            <h6>Valid Thru</h6>
            <h5>08/29</h5>
          </div>
        </div>
      </div>

        <!--back of card -->
      <div class="card back-card">
        <h6>For customer service call +977 4343 3433 or email at
          mastercard@gmail.com
        </h6>
        <span class="magnetic-strip"></span>
        <div class="signature"><i>007</i></div>
        <h5>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, 
          quia eveniet ipsam voluptate repellat aliquam? 
          Est, mollitia animi officia vero aliquid minus sed excepturi odit atque maiores cupiditate, aperiam modi!
        </h5>
      </div>
    </div>
  </section>
</body>
</html>

Code of CSS:

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

body {
  background: #121321;
}

section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  perspective: 1000px;
}

section::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  transform: translate(-150px, -100px);
  background: linear-gradient(90deg, #9c2760, #f3f5f5);
}

section::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  transform: translate(150px, 100px);
  background: linear-gradient(90deg, #9c2760, #f3f3f3);
}

.container {
  position: relative;
  height: 225px;
  width: 375px;
  z-index: 100;
  transition: 0.6s;
  transform-style: preserve-3d;
}

.container:hover {
  transform: rotateY(180deg);
}

.container .card {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 25px;
  border-radius: 25px;
  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
  backface-visibility: hidden;
}

.front-card header,
.front-card .logo {
  display: flex;
  align-items: center;
}

.front-card header {
  justify-content: space-between;
}

.front-card .logo img {
  width: 48px;
  margin-right: 11px;
}

h5 {
  font-size: 16px;
  font-weight: 400;
}

.front-card .chip {
  width: 54px;
}

.front-card .card-details {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 40px;
}

h6 {
  font-size: 10px;
  font-weight: 400;
}

h5.number {
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 10px;
}

h5.name {
  margin-top: 10px;
  font-size: 18px;
}

.card.back-card {
  border: none;
  padding: 15px 25px 25px 25px;
  transform: rotateY(180deg);
}

.card.back-card h6 {
  font-size: 8px;
}

.card.back-card .magnetic-strip {
  position: absolute;
  top: 40px;
  left: 0;
  height: 45px;
  width: 100%;
  background: black
}

.card.back-card .signature {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 80px;
  height: 40px;
  width: 85%;
  background: #d8d5d5;
  border-radius: 7px;
  background: repeating-linear-gradient(#fff,
      #fff 3px,
      #efefef 0px,
      #efefef 9px);
}

.card.back-card i {
  color: black;
  font-size: 15px;
  padding: 4px 6px;
  background-color: #fff;
  margin: -31px;
  border-radius: 4px;
  z-index: -1;
}

.card.back-card h5 {
  font-size: 9px;
  margin-top: 18px;
}

Conclusion

Flipping card UI designs with HTML and CSS add a dynamic element to your website and can be used for various purposes, such as showcasing products, displaying information, or creating interactive experiences. By following the provided HTML and CSS code, you can easily implement this engaging UI design on your website. Experiment with different styles and content to make it unique to your brand or project.

Thank You!!!

Flipping Card UI Design in HTML and CSS