# How to make a transparent QR code

> Turn on the transparent background toggle in the generator, or add bg=transparent to the API URL, and download PNG or SVG — both keep the alpha channel. Only the background is removed; the modules stay solid. Whatever shows through must still be at least 40% lighter than the modules or the code will not scan.

Source: https://useqr.app/docs/how-to/how-to-make-a-transparent-qr-code · Last reviewed 2026-08-21 · UseQR is free forever, MIT licensed, no signup.

---

## 1. Turn off the background

In any UseQR generator there is a **Transparent** toggle next to the background colour.
Switch it on and the white rectangle disappears from the preview; the modules and corner
squares stay whatever colour you set. This works for every code type — a
URL code, a WiFi code, a vCard, anything.

From the [keyless API](/docs/developers/free-qr-code-api-no-key) the same thing is one
parameter:

```
https://useqr.app/api/v1/qr?data=https://example.com&bg=transparent&size=1024
```

One asymmetry worth knowing: **only the background can be transparent**. Passing
`color=transparent` for the modules falls back to solid black, because transparent modules
would leave nothing for a camera to threshold against.

## 2. Download a format that keeps the alpha channel

| Format | Transparency | Use it for |
|---|---|---|
| **PNG** | Full alpha channel | Screens, slides, most design tools |
| **SVG** | Background simply is not drawn | Print, and anything that might be resized |
| JPEG | **None** — alpha is flattened to white or black | Never for transparent codes |

If a tool re-exports your code as JPEG somewhere in the pipeline, the transparency is
gone and you may get a black background behind dark modules — an unscannable code. The
same flattening happens when image compression
runs on upload.

## 3. Place it, then re-check the contrast

This is the step people skip. A transparent code has no background of its own — **it
inherits whatever it is placed on**, and the
[40% luminance rule](/docs/design/qr-code-colors-that-scan) now applies to that surface:

- Black modules on a white or pale page: fine.
- Black modules on a dark navy hero image: dead on arrival.
- Dark modules over a photo: the busiest failure mode — contrast varies module by module.
  See [QR codes on a busy background](/docs/design/qr-code-on-a-busy-background).

If the placement background is dark, do not invert the modules to white —
[light-on-dark codes fail inconsistently](/docs/troubleshooting/qr-code-inverted-and-unreadable).
Put a light panel behind the code instead and keep dark modules.

## 4. Preserve the quiet zone yourself

A normal code carries its own white margin. A transparent one does not, so the
[quiet zone](/glossary/quiet-zone) is now your layout's job: keep a clear, even area of
**at least 4 modules** on every side, in the same tone as whatever shows through the code.
Text or borders creeping into that band is the most common reason transparent codes fail
in otherwise clean designs.

## 5. Verify the final composition

Screenshot or export the code *in place* — on the poster, the slide, the packaging — and
run that image through the validator. It decodes the rendered result and
reports the actual luminance contrast, which settles any argument about whether the
placement works.

## Gotchas

- **White modules become invisible** the moment the code lands on a white page. Sounds
  obvious; happens constantly with codes styled for a dark mock-up.
- **Drop shadows and glows** applied in a design tool bleed into the quiet zone and lower
  edge contrast. Leave the code unstyled.
- **Dark-mode surfaces**: a transparent code that works on the light variant of a page can
  fail on the dark variant of the same page. Test both.
- **Email clients** flatten and recompress images unpredictably — for signatures, prefer a
  solid white background. See [adding a QR code to an email signature](/docs/how-to/how-to-add-a-qr-code-to-an-email-signature).

Generate one now with the background toggle off: [make a transparent QR code](/url?data=https://example.com),
then check the placed result at [/validate](/validate).

## FAQ

### Can a QR code have a transparent background?
Yes. The background carries no data — scanners only need the dark modules and enough light area behind them. Generate with a transparent background as PNG or SVG, then make sure whatever shows through is at least 40% lighter than the modules.

### Can the modules themselves be transparent?
Not usefully. Transparent modules would take on the colour of the surface behind them, leaving nothing consistent to decode. UseQR's API deliberately falls back to black if you request transparent foreground modules.

### Why does my transparent QR code not scan?
Almost always contrast: the surface showing through the code is too dark, too busy, or too close in luminance to the modules. Place it on a plain light area, keep a 4-module quiet zone, and verify the final composition.

### Which format keeps transparency, PNG or SVG?
Both do. PNG carries an alpha channel; SVG simply never draws a background. JPEG supports no transparency at all and will flatten the background, so never let one into the pipeline.

## Try it

- https://useqr.app/url
- https://useqr.app/validate