How to make a transparent QR code

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 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 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.

If the placement background is dark, do not invert the modules to white — light-on-dark codes fail inconsistently. 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 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.

Generate one now with the background toggle off: make a transparent QR code, then check the placed result at /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.