Open QR Toolkit
Design

Make a transparent QR code

Download a code with no background to place on your own design. Pick the surface it will sit on, and the preview and scan check use that colour.

Your codes are made in your browser. Nothing you type is sent anywhere.

What will the code sit on?

The preview and Test scan put the code on this colour. The files themselves have no background.

Type a link or text. Your transparent code appears here.

No code yet

Colours and error correction

How to make a transparent QR code

  1. 01Type the link or text for your code.
  2. 02Pick the colour of the surface the code will sit on.
  3. 03Choose a code colour dark enough for that surface; the check runs as you go.
  4. 04Download the PNG or SVG and place it on your design.

Questions

Why does the surface colour matter?

A transparent code has no background of its own, so phones read it against whatever is behind it. On a dark or busy surface the code may disappear. The scan check reads the code on the colour you pick, so you know before you print.

Which files are transparent?

Both. The PNG has a transparent background, and the SVG has no background shape at all, so it drops straight onto a design in Figma, Illustrator, Canva, or Word.

Can I put a transparent code on a photo?

Only on a calm, light part of it. Patterns and edges behind the code confuse scanners. If the photo is busy, use a code with a white background and a margin instead.

What about the margin around the code?

The margin (quiet zone) is still there, just transparent. Keep the space around the code clear of other text and graphics, at least four modules wide.

Can I make a white code for a dark background?

You can, and newer phones read most of them, but some older phones and scanner apps can't read light codes on dark backgrounds. The tool warns you, and a dark code on a light surface is always the safer choice.

Is anything I type sent to you?

No. Your codes are made in your browser. Nothing you type is sent anywhere.

QR Code is a registered trademark of DENSO WAVE INCORPORATED. Codes are read back with ZXing-C++ and zxing-wasm (licences).