Building a checkout that shows a card preview as the user types? This tool renders a card mockup image from the values you enter, so you can prototype the component, check your layout, or drop a placeholder into a design.

Every image is watermarked as a test card and uses generic network styling rather than real brand marks. It is a UI asset, not a card.

Watermarked mockup

Card Mockup Generator

Renders a card preview at correct ISO/IEC 7810 proportions, in your browser. Every image carries a test-card watermark and generic network styling.

The watermark is part of the image and cannot be switched off. Network styling is generic — no real brand marks are used, because those are trademarks with their own licence terms. Images render in your browser and are never uploaded or stored.

Card layout anatomy

Payment cards are one of the most tightly standardised objects most people carry, which is good news if you are drawing one.

Geometry. ISO/IEC 7810 defines the ID-1 format: 85.60 × 53.98 mm, 0.76 mm thick, with a corner radius specified as a range of 2.88 to 3.48 mm — 3.18 mm is the value normally quoted. Every payment card in the world uses it, which is why they all fit the same wallet slot and the same terminal. The ratio that follows is 1.586:1.

The front carries the EMV chip at a standardised position — roughly 19 mm from the left edge and 22 mm from the top — the contactless symbol, the primary account number, the expiry date, the cardholder name, and the network mark, usually bottom-right or top-right. Numbers were traditionally embossed for imprinting machines; most modern cards print them flat, and many now move them to the back entirely.

The back carries the magnetic stripe across the top, the signature panel, and the security code — printed on the panel for every network except American Express, which puts a four-digit code on the front. Issuer contact details usually sit below.

For a component, the only two numbers you need are the ratio and the radius:

.card-preview {
  aspect-ratio: 1.586 / 1;
  border-radius: 3.7%;  /* 3.18mm / 85.60mm */
}

Expressing the radius as a percentage rather than pixels is the part people miss. A fixed border-radius: 12px looks right at one size and wrong at every other, and card previews are almost always responsive.

Building a card preview component

A few things worth getting right, roughly in the order they cause problems.

Format the number as it is typed. Group digits as the user goes, and use the detected brand to decide the grouping — 4-4-4-4 for most networks, 4-6-5 for American Express, 4-6-4 for a 14-digit Diners card. A preview that regroups mid-typing feels broken; one that never regroups is wrong for a third of cards.

Change styling on brand detection, not on submit. The preview should react within the first few keystrokes, because that immediate feedback is the entire reason the component exists.

Flip to the back when the security code gets focus. It is a genuinely useful affordance — it tells the customer where to look — and it is the one animation on a checkout page nobody objects to. Keep it short and respect prefers-reduced-motion.

Mark the preview as decorative. This is the accessibility point most implementations miss:

<div class="card-preview" aria-hidden="true">
  <div class="card-preview__chip"></div>
  <div class="card-preview__number">•••• •••• •••• 4567</div>
  <div class="card-preview__meta">
    <span>TEST CARDHOLDER</span>
    <span>08/29</span>
  </div>
</div>

The preview duplicates information that already exists in the form fields. Left exposed, a screen reader announces every value twice — once as the field, once as the picture of the field — which turns a helpful visual into noise. aria-hidden="true" on the container fixes it. The real content lives in the inputs, properly labelled.

Never render the full number, even in preview. Last four digits are enough to reassure someone they typed the right card. Showing all sixteen puts the number on screen for anyone standing behind them, and screenshots of checkout pages end up in bug reports, support tickets and screen recordings far more often than anyone plans for. The tool above masks by default for the same reason.

What breaks when real data arrives

Card preview components are almost always built with one example: a sixteen-digit number and a short Latin name. Four inputs will break that layout, and all four are ordinary:

  • A nineteen-digit number. Visa, Discover, UnionPay and Maestro all permit them. Three extra digits overflow a field sized for sixteen, or shrink the font to something unreadable.
  • A fourteen-digit number. Diners Club classic cards. The opposite failure — a mask built for sixteen leaves a gap where digits should be.
  • A long cardholder name. MARIA-ISABEL FERNÁNDEZ RODRÍGUEZ is a perfectly normal name and roughly twice the width of JANE SMITH. Decide in advance whether to truncate, shrink or wrap, because the default is usually to overflow silently.
  • Non-Latin characters. Accented and non-Latin names have to render, not turn into boxes, and right-to-left names change the layout direction of the whole line. The test identity generator produces accented names for exactly this reason.

Test the component with all four before it ships. Each takes seconds and each is the sort of thing that reaches production because nobody typed anything unusual.

Why we watermark every image

A convincing card image has exactly one use beyond design work: making someone believe a card exists that does not. That shows up in marketplace scams, fake payment confirmations, and social engineering. So every image this tool produces carries a watermark that cannot be turned off, uses generic network styling rather than real brand marks, and defaults to a masked number.

If you need an unwatermarked card visual for a legitimate design deliverable, build it in your design tool with your own artwork. We are not the right source for that, and we would rather be useless for the bad case than convenient for it.

Two implementation details make that more than a promise. The watermark is drawn into the SVG itself rather than layered over a preview, so it is present in both the SVG and PNG exports — there is no code path that produces an image without it. And PNG export is capped at 1200 pixels wide: enough for any screen mockup, well short of print quality.

Brand marks and trademark

Visa, Mastercard, American Express and every other network mark is a registered trademark. The networks publish brand guidelines covering how their marks may be reproduced — minimum sizes, clear space, approved colourways, and which contexts require permission. Using them on something that could be mistaken for a real card is squarely outside what those guidelines allow.

This tool sidesteps the question by rendering a generic wordmark you choose from a short list. If your mockup genuinely needs a real network mark — a merchant site showing accepted payment methods, for instance, which is a normal and permitted use — get the artwork from the source and follow the terms:

The same applies to bank names and logos, which this tool does not offer at all. A card mockup carrying a real bank’s identity is a different object from a design placeholder, whatever it was intended for.

Populate a mockup with a properly formed number from the all-network generator, or take a Visa number if you want a specific brand’s shape. The validator confirms any number you paste in. The tool directory lists everything else, and the FAQ covers what a Luhn-valid number does and does not prove.

Frequently Asked Questions

85.60 by 53.98 millimetres, defined as ID-1 in ISO/IEC 7810 — the same format as most national ID cards and driving licences. The corner radius is specified as a range from 2.88 to 3.48 mm, with 3.18 mm the usual nominal value, and the thickness is 0.76 mm. For screen work the number that matters is the aspect ratio: 1.586 to 1.
No, deliberately. There is no control for it and no code path that omits it — it is drawn into the SVG on every render, so it survives both the SVG and PNG exports. A card image without one has a use we would rather not serve, and that is explained in full below.
Not from here. Network brand marks are registered trademarks with published usage guidelines, and using them on anything resembling a real product requires permission. This tool renders a generic wordmark instead. If your design genuinely needs a network mark, take it from the network’s own brand centre and follow their terms.
Yes. Every payment card follows ID-1, which is why cards from different banks and networks stack neatly and fit the same wallet slots and terminals. Design and materials vary; geometry does not. That makes 1.586:1 a safe constant for any card component you build.
As a mockup or prototype asset, yes — that is what they are for. As a representation of a real card in a production interface, no. If your app shows a customer their own card, render it from your own data with the last four digits and the brand you got from your processor, rather than pasting in a generated picture.
No. The SVG is built in your browser from the values in the form, and export writes a file directly from that markup. Nothing is sent to a server, so there is nothing on our side to store — you can confirm it in your browser’s network tab while you type.