Drop your link onto artwork without a white box
Export the code with a transparent background and only the dark modules print, letting your link sit directly on a coloured card, a photo or a patterned flyer with no clumsy white square around it. The transparency is an alpha channel in the file — the modules stay solid, the gaps become see-through.
The part people miss is that transparency doesn't lift the contrast requirement, it just hands you responsibility for it. Whatever shows through the gaps is now the code's background, and if that surface is dark or busy, the scanner can't tell modules from gaps and the code quietly stops working.
Fill the form to generate a QR code
What sits behind the code still has to be light
A scanner reads contrast between dark modules and light gaps. With a transparent background the gaps show whatever is underneath, so a dark photo or a saturated brand colour behind the code destroys that contrast even though the modules themselves are perfectly black.
Place a transparent code only over pale, low-detail areas — a light corner of a photo, a soft pastel panel, empty white space in a layout. Over a dark image, put a light plate behind the code first, which quietly defeats the point of transparency but keeps the scan alive.
PNG alpha versus SVG for the web
For most designs, a transparent PNG is what you want: the alpha channel makes the gaps invisible and it drops straight into a layout tool. Export it large enough for the print size so the modules don't soften.
SVG also supports transparency and is the better pick when the code must scale — a vector transparent code stays sharp on a banner and its transparent areas behave the same. Choose SVG for large or resizable print, PNG for fixed-size placement and screens.
Short links leave more clean background to work with
A long URL makes a dense pattern with thin gaps, and thin gaps over a slightly busy background are the first thing to break. Trim the link before exporting so the modules are bold and the gaps wide enough to stay readable against whatever peeks through.
A short, bold code also gives you a smaller footprint to fit onto a clean area of the design, instead of needing a large empty patch for a fine-grained one.
How to make a transparent URL code
- Paste and shorten the link. Include https:// and trim tracking parameters. Bolder modules and wider gaps survive better over a background than a dense code.
- Turn on transparent background. Export with the background alpha enabled so only the dark modules render and the gaps show your artwork through.
- Place it over a light area. Put the code on pale, uncluttered space. Over a dark or busy image, add a light plate behind it — the usual overlooked failure.
- Scan against the real background. Test the composed design, not the code alone. What reads on white can fail once your artwork shows through the gaps.
Technical details
- Maximum characters: 2953
- Recommended error correction: M (medium) — enough for a link, but keep contrast high; transparency shifts the reliability burden onto the surface behind the code, not onto error correction.
- Transparency is an alpha channel — the gaps reveal whatever is behind, so that surface must stay light.
- PNG alpha for fixed placement, SVG when the transparent code must scale.
Frequently asked questions
- Does a transparent QR code scan as well as one with a white background?
- Only if what shows through stays light. The scanner needs contrast between dark modules and light gaps, and with transparency the background becomes the gap colour. Over pale, plain areas it scans fine; over a dark or busy image the contrast collapses and it fails.
- Can I put a transparent URL code on a dark photo?
- Not directly. The see-through gaps take on the dark image, erasing the contrast the scanner relies on. Either move the code to a light part of the photo, or place a light plate or panel behind it — which works, though it partly undoes the reason for going transparent.
- PNG or SVG for a transparent code?
- PNG with an alpha channel for fixed-size placement and screens, exported large enough that the modules stay sharp. SVG when the code must scale, since it keeps both the modules and the transparent areas crisp at any size, making it the better choice for large or resizable print.
- Why does my transparent code fail over a background but work on white?
- Because on white the gaps were effectively white and contrast was perfect. Once transparent, the gaps reveal your background, and if that surface is coloured, dark or detailed, modules and gaps blur together. Move it to a light, plain area or add a light backing plate.
- Does transparency change the link inside the code?
- No. Transparency only affects the background of the image file — the dark modules and the URL they encode are untouched. The code points exactly where an opaque version would. You are changing how the image sits on a design, not the data it carries.
- Can I recolour the modules on a transparent code?
- You can, but keep them dark against whatever shows through. Transparency already removes the safety of a guaranteed white background, so pale-coloured modules over a light-ish surface leave too little contrast. Dark modules on a light see-through area is the reliable combination.