Make a QR code with a transparent background

True transparency means removing the background rectangle entirely, so the code sits directly on your artwork. The reliable way to get there: download the SVG and delete (or recolour) its background rectangle in any design tool. What matters then is what the code lands on — because scanners still need light behind the pattern.

  1. 1

    Enter your content

    Fill in the fields as usual. With transparency in play, a sparser pattern (shorter content) gives you more tolerance on busy backgrounds.

  2. 2

    Set the background to match your artwork

    Even though you'll remove it later, set the background colour here to the tone it will sit over. That makes the preview an honest preview of the final contrast.

  3. 3

    Download the SVG and place it

    Open the SVG in your design tool, delete the background rectangle, and position the code on your layout — keeping the quiet margin around it clear of text and imagery.

Try it now

Send anyone straight to a web page with a single scan.

Fill in the fields to encode your own content

Waiting for content

Free, no sign-up, no watermark. Your code never leaves this browser.

Why transparency is a layout problem, not a file problem

A scanner doesn't know your code is transparent; it just measures brightness across whatever is behind the modules. A transparent code over a solid pale panel scans perfectly. The same code over a photograph, texture or dark panel fails — the pattern's dark modules blend into dark patches of the image.

So the design rule is: the code needs its own light, uncluttered zone in the layout, at least as large as the pattern plus its margin. Put a subtle pale plate behind it if the artwork underneath can't provide that.

The quiet zone still applies

Removing the background rectangle removes the visible white border, but the code still needs four modules of clear space around the pattern. On a transparent code that means keeping imagery, text and other design elements out of that ring — the empty space has to exist even though it's no longer white.

A safer alternative: match, don't remove

Often the better answer isn't transparency at all. Set the background colour in the generator to the exact colour of the panel the code will sit on, and the code arrives pre-matched — no design-tool step, no risk of forgetting the quiet zone, and identical appearance in the final layout.

Mistakes to avoid

  • Don't place a transparent code over photos or patterns — contrast will fail somewhere in the grid.
  • Don't crop the quiet zone when placing; the code needs clear space around it even without a white box.
  • Avoid very light foreground colours on transparent codes — you lose the safety net of a controlled background.

Common questions

Can I put a code straight onto a photo?

Only over a plain, light area of it. Busy imagery breaks the contrast scanners need — add a pale plate behind the code instead.

Why SVG and not transparent PNG?

The SVG keeps everything vector and editable, so you can remove the background cleanly in any design tool. For most layouts, matching the background colour here is simpler and safer.

How big should the clear area be?

At least four module-widths beyond the pattern on every side. On busy artwork, more is better.

Does the scanner tool care about transparency?

No — it reads whatever brightness the final layout produces, which is why the final layout is what you must test.