A playful, customizable browser-based QR code generator by dottDesign.
QR Pop makes it easy to create QR codes that do not look like an afterthought. Add a URL or text, customize the modules and finder eyes, choose your colours, add a logo, and export a high-resolution PNG.
QR Pop generates customizable QR codes directly in your browser.
You can encode:
- Website URLs
- Campaign URLs
- Plain text
- Any other text content supported by a standard QR code
Everything is designed around a live visual workflow so you can build, customize, scan-test, and export without needing a design application.
Create a QR code from any URL or text value.
QR Pop automatically detects whether the content appears to be a URL or plain text and displays useful metadata alongside the design.
Choose how the individual QR modules are rendered:
- Square
- Dots
- Rounded
- Extra rounded
- Classy
- Classy rounded
Change the appearance of the three large QR finder patterns using different corner styles.
Customize both:
- QR foreground colour
- Background colour
Colours can be selected visually or entered directly as hexadecimal values.
Export a QR code with a transparent background for use over other layouts and graphics.
For reliable scanning, make sure the final design still provides strong contrast and an adequate quiet zone.
Control the margin surrounding the QR code.
The quiet zone helps scanners distinguish the QR code from surrounding content.
Upload a logo or icon and place it in the center of the QR code.
Supported image formats include:
- PNG
- JPEG
- WebP
- SVG
You can also adjust:
- Logo size
- Logo padding
QR Pop automatically increases error correction when using the recommended Auto setting with a logo.
QR Pop supports all four standardized QR error-correction levels:
| Level | Approximate Recovery | Typical Use |
|---|---|---|
| L | 7% | Simple, clean QR codes |
| M | 15% | General-purpose use |
| Q | 25% | More visually customized codes |
| H | 30% | Logos and heavier customization |
An Auto option uses:
Mfor standard QR codesHwhen a center logo is present
Export QR codes as PNG files at:
- 512 × 512
- 768 × 768
- 1024 × 1024
- 1536 × 1536
- 2048 × 2048
Supported browsers can copy the generated QR image directly to the clipboard.
After generating a QR code, design changes automatically update the preview.
You can experiment with shapes, colours, margins, logos, and error correction without repeatedly starting over.
Successfully downloading a QR code triggers a full-screen confetti celebration.
Because downloading a QR code should obviously be an event.
Use:
Command + Enter
on macOS or:
Ctrl + Enter
on Windows to generate the QR code.
QR Pop works across desktop, tablet, and mobile layouts.
Animations and celebration effects respect the browser's prefers-reduced-motion accessibility setting.
Paste a URL or enter text.
Example:
https://example.com
For general digital use:
512 × 512
or:
1024 × 1024
For larger print applications, choose a higher-resolution export.
For most QR codes, Auto is recommended.
QR Pop will use an appropriate correction level based on whether a logo is present.
Choose your:
- Module shape
- Finder shape
- QR colour
- Background colour
- Quiet zone
- Transparency
Optionally upload a logo and adjust its size and padding.
Click:
Make my QR
Always test customized QR codes with multiple devices before publishing or printing.
Download the finished design as a PNG or copy it directly to your clipboard.
Then enjoy the confetti.
QR Pop is intentionally more flexible than a basic black-and-white QR generator.
A few combinations to try:
Modules: Square
Finder: Square
QR: #191919
Background: #ffffff
Modules: Rounded
Finder: Extra Rounded
QR: #191919
Background: #ffffff
Modules: Dots
Finder: Dot
QR: #191919
Background: #ffffff
Use your own brand colour for the QR foreground while keeping the background light and high contrast.
Visual customization can affect QR readability.
For the most dependable results:
- maintain strong foreground/background contrast
- keep an adequate quiet zone
- avoid making a logo too large
- use higher error correction with logos
- avoid overly complex URLs when possible
- test transparent QR codes against their final background
- scan-test before printing large quantities
A QR code looking good is only useful if it still scans.
For best results:
- use PNG or SVG
- use a simple logo
- transparent backgrounds work well
- keep the logo around 15–25% of the QR area
- leave padding around the logo
- use
Herror correction for heavily customized designs
QR Pop's default logo size is designed to stay within a reasonably conservative range.
QR Pop pairs particularly well with UTM Lab.
Instead of encoding:
https://example.com/event
you can first build a tracked campaign URL:
https://example.com/event?utm_source=qr&utm_medium=offline&utm_campaign=fall_event
Then paste that URL into QR Pop.
This allows traffic from posters, signage, brochures, handouts, and other offline materials to be identified more clearly in analytics.
QR Pop runs in the browser.
The QR-generation workflow does not require an account or server-side processing of the content being encoded.
Uploaded logos are read locally by the browser for use in the generated QR code.
- HTML5
- CSS3
- Vanilla JavaScript
- QR Code Styling
- GSAP
- canvas-confetti
- GitHub Pages
No frontend framework is required.
QR Pop is part of the dottDesign collection of small web utilities.
The interface combines:
- playful neo-brutalist styling
- bold colour
- chunky borders
- responsive layouts
- GSAP micro-interactions
- live visual feedback
- deliberately excessive confetti
The goal is simple:
Useful tools do not have to look boring.
A basic deployment can look like:
QR-Code-Generator/
├── index.html
└── README.md
The application is intentionally lightweight and can be deployed as a static site.
Clone the repository:
git clone <YOUR-QR-REPOSITORY-URL>Move into the project folder:
cd <YOUR-QR-REPOSITORY-FOLDER>Then open index.html directly in your browser.
You can also run a simple local server:
python3 -m http.server 8000Then visit:
http://localhost:8000
QR Pop can be deployed as a static site using:
- GitHub Pages
- Cloudflare Pages
- Netlify
- Vercel
- Any standard web host
No database or backend is required for the core QR-generation functionality.
QR Pop includes accessibility-minded features such as:
- semantic form labels
- keyboard-accessible controls
- visible focus states
- responsive layouts
- live status messaging
- reduced-motion support
- native form controls where practical
Accessibility improvements and testing are always welcome.
Potential future additions include:
- SVG export
- PDF export
- gradient QR colours
- separate finder-eye colours
- design presets
- saved QR configurations
- Wi-Fi QR codes
- email QR codes
- phone-number QR codes
- SMS QR codes
- vCard/contact QR codes
- calendar-event QR codes
- bulk QR generation
- downloadable preset files
- direct UTM Lab integration
- stronger automated scan-quality guidance
QR Pop is part of a growing collection of browser-based utilities by dottDesign.
Related tools include:
- UTM Lab
- Image Crop & Resize
- Accessibility Checker
- Reverse UTM
- Site Scraper
More tools:
Built by Derrick Ottenbreit / dottDesign
GitHub:
Portfolio:
https://dottdesign.github.io/portfolio/
For an open-source browser utility, the MIT License is a straightforward option if you want others to be able to use, modify, and redistribute the project.
Add a LICENSE file to the repository if you decide to release QR Pop under MIT.
If QR Pop saves you a few minutes or makes your next campaign a little more fun, consider starring the repository.
Shape it. Colour it. Scan it. 🎉
dottDesign