Join Us

3d Credit Card: Create it with Flip Effect using HTML CSS JS

By /

If you’re looking for a modern and engaging way to display credit card details on your website, this 3D credit card flip UI is a perfect solution. Built with HTML, CSS and JavaScript, this component lets users view both the front and back sides of a credit card. It also includes a Show/Hide CVV button, making the design feel realistic, interactive and secure.

This UI is ideal for payment forms, e-commerce sites, banking dashboards or UI showcases.

HTML Structure

The HTML sets up the card wrapper and the two card faces for 3d Credit Card:

<div class="card-wrapper">
    <div class="card">
        <div class="front">
            <div class="bg"></div>
            <p>CREDIT CARD</p>
            <div class="brand"></div>
            <div class="chip">
                <svg viewBox="0 0 200 140">
                    <rect x="0" y="0" width="200" height="140" fill="#e0ab89" rx="20" ry="20" />
                    <path d="M60,0 100,30 140,0 M100,30 V45 M70,45 H130 V95 H70 V45 M100,95 V110 M60,140 100,110 140,140 M130,45 145,35 H200 M130,70 H200 M130,95 145,105 H200 M70,45 55,35 H0 M70,70 H0 M70,95 60,105 H0" fill="none" stroke="#121212" stroke-width="2"></path>
                </svg>
            </div>
            <div class="contactless-icon"></div>
            <p class="card-number">6200 9200 2300 4543</p>
            <button class="show-cvv">Show CVV</button>
            <div class="card-validity"><span class="validity-text">VALID THRU</span> <span class="valid-date">05/32</span>
            </div>
            <p class="person-name">JOHN DOE</p>
            <div class="upi-icon"></div>
        </div>
        <div class="back">
            <div class="bg"></div>
            <div class="text">
                <span>NON-TRANSFERABLE</span>
                <span>DIGITAL USE ONLY</span>
            </div>
            <div class="mag-stripe"></div>
            <div class="sign-n-cvv">
                <span class="signature"></span>
                <span class="cvv">201</span>
            </div>
            <p class="dummy-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis fuga nobis obcaecati
                dolorem qui nemo tempora tempore sequi itaque! Eos, optio doloribus illo fugiat cum neque molestiae eligendi
                libero dolor quas labore minus? Delectus velit dolor libero suscipit provident corporis dolorum quibusdam,
                praesentium beatae cupiditate harum consequatur a dignissimos necessitatibus!</p>
            <button class="hide-cvv">Hide CVV</button>
            <div class="brand"></div>
            <div class="contact">
                <span>e-mail: contactcentre@sbi.co.in</span>
                <span>Toll Free: 1800 11 1109, 1800 11 2211</span>
            </div>
        </div>
    </div>
</div>
  • Front side: Displays card number, brand logo, chip, contactless icon, cardholder name, expiry date and UPI/RuPay icon.
  • Back side: Contains magnetic stripe, CVV, signature panel, dummy text and contact details.
  • Buttons: A Show CVV / Hide CVV button to flip the card.

This structure creates the foundation for a realistic 3d credit card layout.

CSS Styling

The CSS gives the card its 3D flip animation and sleek banking look:

@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.card-wrapper {
    width: 410px;
    height: 230px;
    min-width: 410px;
    perspective: 1000px;
    font-family: 'Baloo Bhai 2';
}

.card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    color: rgb(245, 245, 245);
    transform-style: preserve-3d;
}

.front,
.back {
    display: grid;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    backface-visibility: hidden;
}

.front {
    gap: 10px;
    line-height: 1;
    align-items: center;
    padding: 10px 15px 10px;
    justify-content: space-between;
    grid-template-rows: repeat(2, auto) 1fr repeat(2, auto);
    grid-template-areas: "text brand" "chip contactless" "number number" "btn valid" "name type";
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    z-index: -1;
    background: url(/public/assets/bg.jpg) center / cover no-repeat;
}

.brand {
    width: 60px;
    height: 25px;
    justify-self: end;
    margin-bottom: 10px;
    background: url(/public/assets/sbi.png) center / contain no-repeat;
}

.chip {
    width: 50px;
    grid-area: chip;
    margin-left: 15px;
}

.contactless-icon {
    width: 50px;
    height: 35px;
    justify-self: end;
    margin-right: 15px;
    grid-area: contactless;
    background: url(/public/assets/contactless.png) center / contain no-repeat;
}

.card-number {
    font-size: 25px;
    grid-area: number;
    color: #e8e8e8;
    margin-left: 15px;
    letter-spacing: 3px;
    filter: drop-shadow(0px 0px 3px black);
}

.show-cvv,
.hide-cvv {
    border: none;
    grid-area: btn;
    color: white;
    line-height: 2;
    cursor: pointer;
    font-size: 14px;
    padding: 0px 15px;
    border-radius: 5px;
    width: max-content;
    font-family: "Baloo Bhai 2";
    backdrop-filter: blur(10px);
    background-color: #0000006b;
}

.card-validity {
    grid-area: valid;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.validity-text {
    font-size: 8px;
    width: min-content;
}

.valid-date {
    font-size: 20px;
    letter-spacing: 4px;
}

.person-name {
    grid-area: name;
    letter-spacing: 2px;
    padding: 0 15px;
}

.upi-icon {
    width: 100px;
    height: 30px;
    grid-area: type;
    justify-self: flex-end;
    background: url(/public/assets/RuPay.png) center / contain no-repeat;
}

.back {
    background-color: #050505;
    transform: rotateY(180deg);
    grid-template-rows: repeat(4, auto)1fr auto;
    grid-template-areas: "text text" "stripe stripe" "sc sc" "btn dummy" "brand dummy" "contact contact";
}

.back .bg {
    opacity: 0.5;
}

.show-backside {
    transform: rotateY(-180deg);
}

.text {
    display: flex;
    padding: 0 12px;
    font-size: 10px;
    grid-area: text;
    color: #ffffffba;
    justify-content: space-between;
}

.mag-stripe {
    width: 100%;
    height: 50px;
    grid-area: stripe;
    background-color: #000;
}

.sign-n-cvv {
    display: flex;
    width: 100%;
    grid-area: sc;
    height: 40px;
    margin: 10px 0;
}

.signature {
    width: 100%;
    background-image: repeating-linear-gradient(320deg, #e7e7e7 -2px, #e7e7e7 3px, #cccccc 0px, #cccccc 8px);
}

.cvv {
    height: 40px;
    color: black;
    padding: 10px 12px;
    font-style: italic;
    letter-spacing: 2px;
    background: white;
}

.dummy-text {
    grid-area: dummy;
    font-size: 8px;
    color: #ffffff69;
}

.hide-cvv {
    margin: 0 10px;
    background-color: #0000008f;
    border: 1px solid #ffffff1f;
}

.back .brand {
    margin: 10px 15px 0;
    justify-self: self-start;
}

.contact {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #ffffff91;
    padding: 2px 10px;
    grid-area: contact;
    letter-spacing: 1.5px;
}
  • Perspective & transform: perspective: 1000px and rotateY handle the flipping effect.
  • Front side design: Includes chip SVG, contactless icon, branded background and embossed-style card number.
  • Back side design: Features black magnetic stripe, signature panel, white CVV box and customer support details.
  • Interactivity: Buttons styled with blurred glass background for a modern touch.

The entire card is responsive and looks elegant with shadows, background images and professional typography.

JavaScript Functionality

JavaScript handles the flip animation:

document.querySelectorAll('.show-cvv, .hide-cvv').forEach(elem =>
    elem.addEventListener('click', () => document.querySelector('.card').classList.toggle('show-backside')))
  • Listens for clicks on Show CVV / Hide CVV buttons.
  • Toggles a class (.show-backside) on the .card element.
  • This class rotates the card using CSS transitions, revealing the back side with CVV.

This creates a realistic user experience, just like flipping a physical credit card.

Use Cases

You can integrate this 3d credit card flip UI into:

  • Payment forms (checkout pages, subscription systems).
  • Banking dashboards (digital wallet or account management).
  • UI/UX showcases for portfolio websites.
  • Educational projects to demonstrate CSS 3D transforms and animations.

Benefits

  • Realistic 3D flip effect using pure CSS transitions.
  • Secure experience with Show/Hide CVV functionality.
  • Customizable: Replace logos, background images and card details.
  • Lightweight: Built with only HTML, CSS and minimal JavaScript.

Final Thoughts

This interactive 3d credit card flip design adds professionalism and creativity to any website dealing with payments or finance. By combining 3D transforms, realistic styling and CVV reveal functionality, it mimics a real credit card while keeping the design lightweight and responsive.

If you’re building a payment gateway, e-commerce checkout or a finance UI demo, this component will make your project stand out.

Related Posts

Leave a Comment

Join Us
Scroll to Top