webdevpuneet.com

Related Snippets

57 in Mobile Screens category
36–41 of 57

Wallet Card

App Store Card

Mobile Status Bar

Mobile Onboarding Screens

Mobile Login Screen

Mobile Lock Screen

Wallet Card — Free 3D Flip Credit Card UI Snippet

Wallet Card · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
Tags3D EffectsMobile UI

Copy & paste

Source Code

<div class="wc-stage">
  <div class="wc-card" id="wcCard">
    <div class="wc-inner">
      <div class="wc-front">
        <div class="wc-top"><span class="wc-brand">AURORA</span><span class="wc-net">credit</span></div>
        <div class="wc-chip"></div>
        <div class="wc-num">4921&nbsp;&nbsp;7634&nbsp;&nbsp;8810&nbsp;&nbsp;2245</div>
        <div class="wc-row">
          <div><small>Card holder</small><b>ALEX MORGAN</b></div>
          <div><small>Expires</small><b>08/29</b></div>
          <div class="wc-logo"><i></i><i></i></div>
        </div>
      </div>
      <div class="wc-back">
        <div class="wc-stripe"></div>
        <div class="wc-sig"><span>ALEX MORGAN</span><b>921</b></div>
        <div class="wc-barcode"></div>
        <p class="wc-note">Tap card to flip back</p>
      </div>
    </div>
  </div>
  <button type="button" class="wc-flip" id="wcFlip">Flip card</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

3D card flip
preserve-3d and backface-visibility, not a crossfade.
CSS chip and logo
Gold EMV chip and blend-mode network mark.
Realistic back
Magnetic stripe, hatched signature, and barcode.
Pointer tilt
Front rotates toward the cursor for depth.
Tilt suppressed when flipped
So it never fights the flip transform.
Click or button flip
Two ways to toggle, with propagation handled.
Data-driven
Render any card from number, name, and gradient.
No dependency
Pure HTML/CSS/JS for wallets and fintech UIs.

About this UI Snippet

Wallet Card — 3D Flip Credit / Membership Card

Screenshot of the Wallet Card snippet rendered live

A wallet card is the visual credit, loyalty, or membership card you see in wallet apps and checkout flows — a glossy front with a chip and number, and a back with a signature strip and barcode. This snippet builds a 3D flippable one in HTML and CSS, with a real card flip and a subtle pointer tilt, in vanilla JavaScript with no dependency. It's a display card (not an input) ideal for wallets, profiles, and fintech UIs.

The 3D flip with preserve-3d

The flip is the core technique. A .wc-inner wrapper has transform-style: preserve-3d inside a perspective container, and the front and back faces are stacked absolutely with backface-visibility: hidden. The back is pre-rotated 180deg, so when a .flipped class rotates the inner wrapper rotateY(180deg), the front turns away (hidden) and the back turns to face you — a true 3D card flip transitioned over 0.7s, not a crossfade.

A realistic card front in pure CSS

The front is a gradient with a soft circular highlight (::after), an EMV chip drawn as a gold gradient box with an inset contact rectangle, a monospace card number with a subtle text-shadow, and the holder/expiry labels. The network logo is the classic two overlapping circles using mix-blend-mode: screen so the overlap brightens like the Mastercard mark — all CSS, no images.

The card back

The back has a black magnetic stripe, a signature panel drawn with a diagonal repeating-linear-gradient (the hatched signature look) plus a CVV box, and a barcode made from a vertical repeating-linear-gradient of thin bars. These patterns recreate the familiar back-of-card details without any assets.

Pointer tilt for depth

When the front is showing, a pointermove handler maps the cursor position to small rotateX/rotateY values, so the card tilts toward the pointer for a premium, tactile feel; it resets on leave and is suppressed while flipped so it doesn't fight the flip transform. Clicking the card (or the button) toggles the flip.

Reusing it

Pass the number, name, expiry, and gradient as data to render any card — a loyalty card, a gift card, a virtual debit card. Keep it as a display component beside a credit card input form so the card updates live as the user types, or show it in a wallet list.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA 3D wallet card renders showing its front.
  2. 2
    Click the cardIt flips in 3D to reveal the signature strip and barcode.
  3. 3
    Move your pointerThe front tilts toward the cursor for depth.
  4. 4
    Flip backClick again or use the button to return to the front.
  5. 5
    Recolor itChange the front gradient for your own brand.
  6. 6
    Bind dataRender the number, name, and expiry from props.

Real-world uses

Common Use Cases

Wallet and banking apps
Show a payment card beside a phone mockup, with a gold EMV chip and blend-mode network logo drawn entirely in CSS.
Checkout previews
Mirror what a customer types in a credit card input, flipping to the back to reveal the signature strip and barcode.
Loyalty and membership cards
Display points beside a loyalty points widget, using the same flip to reveal a barcode for scanning in store.
Gift card designs
Reuse the flip mechanic for a gift card, with preserve-3d and backface visibility making a real two-sided object rather than a crossfade.
Fintech marketing heroes
Feature the tilting card next to a product hero, with pointer tilt rotating the front toward the cursor for depth.
Related: Smart App Banner
See the Smart App Banner for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The inner wrapper has transform-style: preserve-3d inside a perspective container, and the two faces are stacked with backface-visibility: hidden. The back is pre-rotated 180 degrees, so rotating the wrapper rotateY(180deg) via a flipped class turns the front away (hidden) and brings the back forward. It's a genuine 3D rotation transitioned over 0.7 seconds, not a fade.

No, it's entirely CSS. The chip is a gold gradient box with an inset contact rectangle, the network logo is two overlapping circles using mix-blend-mode: screen, the signature strip is a diagonal repeating-linear-gradient, and the barcode is a vertical one. Building it from CSS keeps it crisp and recolorable with no assets.

The pointermove handler checks for the flipped class and returns early if it's present, because applying a tilt transform to the inner wrapper would override the rotateY(180deg) flip and break it. Limiting tilt to the front-facing state keeps the flip animation clean while still adding depth when the front is shown.

Yes. The number, holder name, expiry, CVV, and the front gradient are all just markup, so render them from props or state. Pair it with a card-input form and update the display as the user types for the live-preview pattern, or map a list of cards to a wallet stack.

Make it a component with a flipped boolean in state toggled on click, bound to the flipped class. Render the card details from props. Put the pointer tilt in an event handler that sets an inline transform, guarded by the flipped state, and reset it on pointer leave. In Tailwind, use perspective and rotate-y utilities (or a small style block) with backface-hidden on the faces.