Online Tool Store
Business Card Mockup
Lay out a business card in US, ISO or Japanese size with trim, bleed and safe-area guides, then download each side as SVG or 300 dpi PNG. Runs in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Front
Back
Before you send this to a printer. The SVG is vector and scales to any size, which is the one to hand over; the PNG is 300 dpi and fine for a mockup or an email signature. Both are sRGB — a browser cannot produce CMYK, so your printer will convert, and saturated colours will shift a little when they do. Text uses the system font stack rather than an embedded typeface, so ask your printer to check the font before it goes on press.
How to use it
- Type your details over the sample ones — both sides update as you go.
- Pick a card size for where it will be printed, then a layout and a colour.
- Check nothing important crosses the blue safe-area line.
- Tick the bleed box if colour runs to the edge, then download each side.
Why the card is drawn in millimetres
Everything here is SVG measured in millimetres, so the preview and the download are the same geometry at different scales. That is what lets the print numbers be exact rather than approximate:
US 3.5 × 2 in = 88.9 × 50.8 mm → 1050 × 600 px at 300 dpi
with 3 mm bleed = 94.9 × 56.8 mm → 1121 × 671 px
ISO 85 × 55 mm → 1004 × 650 px at 300 dpi
A 3 mm bleed really is 3 mm, not "roughly this many pixels". The bleed is produced by drawing the background oversized and moving the artwork inwards, so the colour genuinely runs past the trim line — which is the whole point. A file that merely has a bigger canvas with white round the edge gives you a white sliver when it is cut.
Text on the accent colour picks itself
The colour band and the back of the card put text directly on your accent colour, and white is the obvious choice only while the accent stays dark. The tool measures it instead, comparing the contrast of white and near-black against whatever colour you picked and using the better one.
accent #1f3a5f → white 11.5:1, ink 1.5:1 → white
accent #94a3b8 → white 2.6:1, ink 6.9:1 → ink
On a pale accent, hardcoded white would land at 2.6:1 — under the 4.5:1 minimum for normal text — so the card switches to ink and reads at 6.9:1 instead. Pick a light custom accent and you will see the lettering flip.
The three sizes are not interchangeable
Business cards are regional. The US card is 3.5 × 2 inches, wider and shorter; the European standard is 85 × 55 mm, the same footprint as a credit card; Japan uses 91 × 55 mm. Designing at one and printing at another means either a stretched layout or a trimmed one, so it is worth setting the size before you fuss over the spacing.
What this cannot do
Two limits are worth stating plainly rather than discovering at the printer. There is no CMYK: a browser works in sRGB, so your printer converts, and saturated colours will shift. And there is no embedded font: the card uses the system sans-serif stack, so the export carries text rather than outlines and a press may substitute a different face. For a mockup, a first draft or an internal sign-off, neither matters. For a finished press-ready file, take the SVG into a vector editor, set your real typeface and convert the text to outlines.
FAQ
What is bleed, and do I need it?
Bleed is extra artwork past the edge of the card, so that when the guillotine cuts a fraction off-centre you get your colour at the edge rather than a sliver of white paper. If any colour or image touches the edge you need it; if your card is white to the edges you can skip it. Three millimetres is the usual amount.
What is the safe area for?
The same cutting tolerance in reverse. Text sitting right at the trim line risks being shaved, so keep it about 4 mm in. The blue dashed rectangle in the preview marks that boundary — nothing important should cross it.
Should I send my printer the SVG or the PNG?
The SVG. It is vector, so it stays sharp at any size and the text is still text. The PNG is a 300 dpi raster — good for a mockup, an email signature or a quick approval, but it cannot be scaled up and the type is pixels by then.
Why do the colours look different when printed?
Because screens are RGB and presses are CMYK, and a browser cannot produce CMYK. Your printer will convert, and bright saturated colours — vivid blues and greens especially — come out duller because CMYK simply cannot reach them. Ask for a proof if the exact shade matters.
Can I use my own font?
Not in this tool. The card uses the system sans-serif stack, and the export does not embed a typeface, so your printer will substitute whatever they have unless you replace the text with outlines in a vector editor first. That is the honest limit of a browser-based mockup.
Is my contact information uploaded anywhere?
No. The card is drawn in your browser and the downloads are generated there too. Nothing is sent to a server, which is worth knowing given that the thing you are typing in is your own phone number and email address.
How we compare
| Feature | Online Tool Store | Online card designers | Illustrator or Affinity |
|---|---|---|---|
| Vector SVG download, no watermark | ✓ | Usually paid, often raster only | ✓ |
| Real trim, bleed and safe-area guides | ✓ | Sometimes hidden | ✓ |
| No account, no signup, no upsell | ✓ | ✗ | Paid software |
| Your contact details never leave the browser | ✓ | ✗ | ✓ |
| Ready in under a minute | ✓ | ✓ | ✗ |
| CMYK output and colour proofing | ✗ | Handled by their press | ✓ |
| Custom fonts, logos and images | ✗ | ✓ | ✓ |
This is a fast, free way to see a card and get a clean vector file, with the print geometry correct and stated. It has no logo upload, no custom fonts and no CMYK — so treat it as the mockup stage. When the design is settled, open the SVG in a vector editor for the press-ready version.