Transparent QR Code Generator: No Background PNG and SVG
Built by Najeeb · last updated September 5, 2026 · checked against our testing process
Will it scan on your background?
A transparent code has no white box protecting it, so whatever sits behind it decides whether a scanner can read it. Set the two colours to check before you place it.
Related: QR code generator for printed labels · a QR code for a real estate sign · QR menu vs a printed menu · all QR code tools
How to make a transparent QR code
- Enter your link or text: paste the URL or type the text the code should contain. The preview shows a checkerboard, which means the background is transparent.
- Keep transparent background on: it's enabled by default, so the downloaded PNG has no white box around the code.
- Set the dot color: pick a dark color that contrasts with wherever you'll place the code, so it stays scannable.
- Add a logo (optional): and adjust dot and corner styles to match your design.
- Download PNG: the PNG keeps the transparency. Use SVG if you need vector scaling; drop either onto your poster, packaging, or colored layout.
A QR code with no white box
Most QR generators bake a solid white square behind the code. On a plain page that's fine: on a colored poster, a photo, or product packaging it looks like a sticker slapped on top. This tool exports a PNG with a genuinely transparent background: only the dots are drawn, so the code sits directly on whatever is behind it. The checkerboard in the preview is how transparency is shown; it won't appear in your download.
Keep it scannable on color
Transparency changes one rule you have to respect: contrast now comes from whatever is behind the code, not a white box. A scanner needs clear separation between the dots and the surface. Dark dots on a light or mid-tone background scan reliably; dark dots on a dark photo do not. When placing the code over a busy image, drop a light panel behind it or choose a lighter area. Test with your phone before printing.
Where transparent codes shine
Posters and flyers. The code blends into the design instead of interrupting it. Packaging: printed over branded color without an ugly white patch. Slides and video: overlaid on any background. Merch and stickers: die-cut shapes with no rectangular edge. Export SVG when you need it to scale to large-format print without a single blurred edge.
Private and static
Your content is encoded directly into the image and everything runs in your browser: nothing is uploaded or stored. It's a static code with no redirect service, so it never expires.
Related QR tools
Need a labeled or branded solid version instead? Use the QR code generator for labels or the WiFi QR code generator. Batch many codes at once with the Excel-list QR generator, and check codes you receive with the safe QR code scanner.
Contrast ratio minimums and scan failure thresholds
QR code scanners rely on luminance contrast, not color difference. The ISO/IEC 18004:2015 standard specifies a minimum print contrast signal (PCS) of 0.6, meaning the dark modules must reflect at least 40% less light than the light modules. On a transparent background placed over a mid-tone surface - grey concrete, kraft paper, dark wood - the effective PCS can drop below 0.3, producing scan failure rates above 35% in field tests. Measure the background hex value before exporting. Any background with a luminance value above #888888 (sRGB ~128) risks insufficient contrast for the dark modules alone to carry the code. Use a drop shadow or thin white keyline at 1–2px around the entire symbol boundary to recover contrast without adding a solid background box.
File format decisions and alpha channel support
Transparent QR codes require a file format that carries an alpha channel. PNG-32 is the default choice: lossless, full 8-bit alpha, universally supported. JPEG does not support transparency; a JPEG export will fill the transparent area with white or black, destroying the effect entirely. SVG is the superior format for print use - vector scaling means no pixelation at any DPI, and the background rectangle can simply be omitted from the markup. For embroidery or vinyl cutting machines, SVG is often the only accepted input. WebP supports alpha and compresses 26% smaller than equivalent PNG on average, but Safari versions before 14 (released 2020) do not render WebP transparency correctly, which matters for email campaign graphics. GIF supports transparency but caps at 256 colors and uses binary alpha (fully transparent or fully opaque, no partial), making anti-aliased module edges render with jagged halos.
Minimum size, quiet zone, and print production rules
ISO/IEC 18004 mandates a quiet zone of 4 module widths on all four sides. At a minimum printed size of 2 cm × 2 cm, each module in a 25×25 Version 2 symbol measures roughly 0.64 mm - below the reliable reproduction threshold for most commercial inkjet printers operating at 300 DPI. Offset litho at 1200 DPI handles modules down to 0.2 mm. For packaging print, specify the QR at no smaller than 2.5 cm on the short axis and confirm with a physical proof scan before committing to a full press run. Transparent codes on foil or metallic substrates require the printer to lay down a white ink flood coat beneath the dark modules; this is a separate plate and adds roughly $80–$140 per SKU to plate costs in short-run digital foil workflows.
Batch and label production workflows
Single transparent QR exports work for one-off use. For product labeling at scale, generate codes programmatically from a data source using a QR code generator from Excel list and apply the transparent PNG as a layer in your label template. Each unique SKU or serial number requires its own code; a 500-unit run with unique serialization produces 500 separate PNG files. Verify each file's alpha channel integrity with a batch scanner before sending to print - corrupt alpha layers appear as solid-white squares in the printed output with no visible warning at export time. For fixed-location assets such as equipment tags, a QR code for labels workflow with a static URL and transparent overlay keeps the label face uncluttered while preserving full scannability.
Match your brand colors before you export
These are WCAG relative luminance ratios between the module color and the surface the PNG sits on, the same math accessibility checkers use, so you can test any brand pair with a free contrast checker before print. Aim for 4:1 or better. Below 3:1, expect misses even at arm's length.
| Modules | Background | Ratio | Verdict |
|---|---|---|---|
#000000 black | #B08D57 kraft paper | 6.8:1 | Passes |
#333333 charcoal | #FFFFFF white | 12.6:1 | Passes |
#1E5631 forest green | #F5F0E1 cream | 7.6:1 | Passes |
#FFFFFF white | #1F3A5F navy | 11.5:1 | Passes, but reversed: see below |
#888888 grey | #F7D6D0 pastel pink | 2.6:1 | Fails |
#F26522 orange | #FFD447 yellow | 2.2:1 | Fails |
When a pair fails, darken the modules, not the background. Dropping that grey to #444444 on the same pink lifts the ratio to about 7:1 and the code scans again.
Reversed codes: light modules on dark surfaces
White on navy clears 11:1 and can still fail, because the code is reversed. iOS Camera and Google Lens decode light-on-dark codes without complaint. Many embedded scanners do not: older POS and ticketing apps and some warehouse guns only look for dark modules on a light ground, because most barcode libraries leave inverted decoding switched off unless the developer turns it on. The rule: if you control the scanning app, reversed is fine. If strangers will scan the print with unknown apps, keep the modules darker than the surface. A reversed print already failing in the field is worth running through the scan failure checklist before you reprint.
Placing the PNG in Canva or Photoshop
Nearly every transparent QR PNG ends up in a design app, and most failures happen there, not in the generator.
- Start big and scale down, never up. A 1000 px export placed at 300 px stays crisp; a 300 px export stretched to fill a poster produces the soft edges covered in blurred QR causes and fixes.
- Leave the code layer at 100% opacity. Lowering opacity blends the modules toward whatever sits behind them: black at 50% over white reads as mid grey, about 3.9:1, and over any colored plate it lands lower still.
- If the layout forces a photo behind the code, put a solid plate under it and size the plate with clear margin: 4 module widths on every side. For a 3 cm code at the common 25 module size that is about 0.5 cm per side, so a 4 cm plate. Then check the plate color against the table above.
- Test before the run: print one sheet at 100% scale and scan from 30 cm with both iPhone Camera and Google Lens. Both should lock in under 2 seconds. This matters double for one-shot jobs like wedding photo QR codes, where there is no second print run.
Remove the white box from an existing QR code
Already have a QR image with a white background? Magic wand deletion in Photoshop looks clean at 100% zoom, but anti-aliasing leaves a 1 to 2 px grey fringe on every module edge, exactly where a scanner reads the dark-to-light transitions. Automatic background removers are worse: they treat the three finder squares as objects and soften their corners.
The reliable fix takes under a minute. Scan the old code once to read out its URL, paste that URL into the generator above, match your module color, and export. The new code encodes the same URL, so it opens the same destination everywhere the old one did. The dot pattern may look different, and that is normal.
Glass, windows, and clear vinyl
A transparent code printed on clear vinyl has no background of its own: the modules sit against whatever happens to be behind the window, which is rarely a clean light surface. Order the sticker with a white ink backing layer behind the modules; most vinyl printers offer it as a standard option. Typical clear vinyl stickers run $0.35 to $0.60 each at 250 units. Size for distance too: a code scanned from 1 m away needs to be 8 to 10 cm wide, roughly a tenth of the scan distance. For shelf edges and product tags, the label QR generator handles print sizing directly.
Frequently Asked Questions
How do I make a QR code with a transparent background?
Enter your link above and keep "Transparent background" checked (it's on by default), then download the PNG. The white box is removed and only the dots remain.
Why does the preview show a checkerboard?
The checkerboard is the standard way to display transparency on screen. It is not part of the image: your downloaded PNG has a truly transparent background.
Will a transparent QR code still scan?
Yes, as long as there's contrast between the dots and whatever is behind them. Use dark dots over a light or mid-tone surface, and test before printing. Avoid dark dots on dark photos.
Which format keeps the transparency?
PNG keeps a transparent background. SVG is vector and also has no background fill: use it for large-format print.
Is my data uploaded?
No. The code is generated locally in your browser; nothing is sent to or stored on our server.