The QR Code Generator turns a screen into a live, styled QR code for a URL, WiFi network, email, phone number, or text message — built and previewed in the browser, then put up full screen to scan.
Before you start
- The content you're encoding, ready to paste in — a URL, WiFi name and password, an email address, or a phone number.
- A phone to test-scan with before you rely on the display live. Styling choices that look fine on screen can still fail to scan.
- A logo file (PNG, JPG, SVG, or WebP), if you want to brand the code with a center logo.
Build your QR code
- Select QR Code Type: Text/URL, WiFi Network, Email, Phone, or SMS.
- Fill in the fields for that type. Text/URL takes a single Text Content field. WiFi Network asks for Network Name (SSID), Password, Security Type, and a Hidden Network toggle. Email takes an Email Address plus optional Subject and Body. Phone and SMS each take a Phone Number (SMS adds an optional Message).
- Edit Display Title if you want different wording than the prompt it fills in automatically (for example "Scan to connect to WiFi").
- Open the Style tab for Dot Style, Corner Style, Corner Dot Style, and a Center Logo.
- Open Colors and Layout for colors, QR Code Size, and Quiet Zone.
- Select Go Fullscreen to put the code on screen, or use Download QR Code or the copy button beside it to save an image instead.
You'll know it worked when the preview updates instantly as you type or change a style, and a test scan with a phone camera opens the right link, network, or message.
What each control does
| Control | Range | Default | What it changes |
|---|---|---|---|
| Dot Style | Square, Rounded, Dots, Classy, Classy Rounded, Extra Rounded | Dots | Shape of the QR modules. Square scans most reliably; the rest trade a little reliability for a distinct look. |
| Corner Style | Square, Rounded, Extra Rounded | Square | Shape of the three large corner squares scanners lock onto first. |
| Corner Dot Style | Square, Circle | Square | Shape of the small dot inside each corner square. |
| Center Logo | PNG, JPG, SVG, or WebP upload | None | Places an image in the middle. Automatically raises error correction so the code stays scannable with the center covered. |
| Logo Size | 10–50% | 30% | Size of the logo relative to the code. Only shown once a logo is set. |
| Logo Rounding | 0–50% | 0% | Corner rounding on the logo, square (0%) to a full circle (50%). |
| Match QR color to logo | On/off | On | Samples the logo's dominant color and applies it as QR Code Color. |
| QR Code Color | Color picker | #000000 | Color of the modules and corners. |
| QR Background Color | Color picker | #ffffff | Card color behind the code. Disabled while Show Background is off. |
| Page Background Color | Color picker | #000000 | Area around the card, and behind the code itself when Show Background is off. |
| QR Code Size | 30–90% | 50% | Share of the screen's smaller dimension the code fills. |
| Quiet Zone | 0–32px | 16px | Blank margin around the code. Scanners need some margin to lock on; 0 can cause failed scans. |
| Show Background | On/off | On | Colored card behind the code versus a transparent code straight on the page background. |
| Show Shadow | On/off | Off | Drop shadow under the card, for a raised look on light backgrounds. |
Style Presets and Quick Presets set several of these at once — Classic, Rounded, Dots, and Classy for shape; Classic, Inverted, Gray, and Blue for color.
Common setups
- Event check-in link. Text/URL with your registration link, Dot Style Rounded, Corner Style Extra Rounded, Show Shadow on, QR Code Size 60–70%.
- Guest WiFi sign. WiFi Network type with SSID, Password, and Security Type filled in, Dot Style Square for maximum reliability, Quiet Zone 20+, QR Code Size 50–60%.
- Branded code with a logo. Upload a Center Logo, leave Match QR color to logo on, Logo Size 25–30% (under the 50% cap), Dot Style Classy Rounded with Corner Style Extra Rounded, Quiet Zone 20+.
- Dark-venue presentation screen. Apply the Inverted color preset and match Page Background Color to the room's other slides, Quiet Zone 24–32, so it reads against stage lighting without a stark white card.
Troubleshooting
Phones can't scan the code. Heavy styling and a large logo compound — Dots or Classy dot styles plus a logo near 50% Logo Size push the pattern past what some scanners can decode. Switch Dot Style to Square or Rounded, drop Logo Size to 25–30%, and raise Quiet Zone for a cleaner margin.
The WiFi code connects to the wrong network, or not at all. With Network Name (SSID) left blank, the code encodes a placeholder network rather than nothing. Fill in Network Name and Password exactly as they appear in your router settings, and confirm Security Type matches (WPA/WPA2, WEP, or Open).
Copying the code pastes a long block of text instead of an image. Some browsers block writing an image directly to the clipboard, so the copy button falls back to copying the image's data URL as text. Use Download QR Code instead and attach the PNG file directly.
The QR Background Color picker is grayed out. Show Background is off. Turn it on to enable the colored card and its color picker — with it off, the code sits directly on Page Background Color instead.
The code is barely visible against the page. Show Background is off and QR Code Color is too close in brightness to Page Background Color. Turn Show Background back on so the code sits on its own card — at the default white QR Background Color that restores clear contrast with a dark QR Code Color. If you've also changed QR Background Color, check it against QR Code Color as well; the card only helps while those two differ clearly in lightness.
Styling and content are gone after a reload. Nothing here is saved between reloads — type, content fields, colors, and logo all reset to their defaults. Rebuild it, or keep the tab open instead of reloading once it's set the way you want.
Next steps
For a lobby or event display, add this into rotation with Slideshow, or pair it with Countdown Timer for session breaks.