How to Use a Gradient on a QR Code Without Breaking Scans
A gradient can make a QR code look like part of a brand instead of a black-and-white sticker, but it also removes the one thing scanners rely on most: consistent, high contrast between dark modules and the background. The safe way to use a gradient is to treat it as a constrained design choice. Both ends of the gradient must stay clearly darker than the background, and the darkest end should sit near the finder patterns in the corners, because those three large squares are what the camera locks onto first. If either end drifts toward the background color, part of the code can disappear into the page and scanning becomes slow or impossible.
Start with a dark, saturated pair rather than two light pastels. A deep navy fading into a strong indigo or a dark teal fading into a forest green usually clears the contrast guardrail across the whole code. A pale blue fading into a pale pink will not, even if it looks attractive on screen. The tool above measures each gradient end against your background using the same relative-luminance math behind the WCAG contrast ratio, and it warns you when either end falls below 3:1. Treat that warning as a hard stop for print work, not a suggestion. Screens are forgiving; printed paper, sunlight, and budget phone cameras are not.
Keep the background solid and light. A gradient background behind a gradient code is a common way to ruin an otherwise good design, because modules at the light end of the code can blend into dark patches of the background. White or near-white is the safest choice, and it also gives you the most freedom with the gradient itself. If your layout demands a colored background, test the lightest gradient end against the darkest part of that background, not against an average, and print a proof before committing to a full run.
Angle matters more than people expect. A diagonal gradient spreads the color change across the whole code, so no single row becomes too light. A steep vertical gradient can leave an entire edge washed out if one end is marginal. When you are close to the guardrail, a diagonal angle plus a slightly darker end color is the simplest fix. Also keep the quiet zone, the blank margin around the code, in the solid background color. Extending the gradient into the quiet zone makes the code boundary harder for the camera to find.
Before any print run, export the PNG, print one copy at the exact final size, and scan it with at least two different phones, including an older or cheaper one if you can. Scan in the lighting where the code will actually live: dim restaurant light, outdoor shade, or a glossy shop window. If the first scan is not fast and confident, darken the gradient, enlarge the code, or drop the gradient entirely. A plain black code that scans instantly always beats a beautiful gradient that scans sometimes. Keep the error-correction level in mind as well: this tool uses level M, which tolerates small damage, but it cannot rescue a code whose contrast has failed.