Tools – Free QR Code Generator

by

Below is a working example of a tool we coded – below that is the code so you can use it on your website as well or custom tailor it!

Use our Free QR Code Generator for people to connect with you! —perfect for flyers, business cards, posters, packaging and tons of other great ideas.

Works Forever (WE USE STATIC QR CODES, NOT DYNAMIC QR CODES) – Therefore, once generated, your QR code never expires.

Generate Your Custom QR Code

1️⃣ QR Code Content & Size








2️⃣ QR Code Styling


10px





3️⃣ Advanced Optimization



(*Recovers X% of lost or obstructed data in the QR code)

Low (75) – Digital use (scanned from screens, no damage expected)
M – Medium (15%) – Printed materials with minimal wear (magazines, banners, posters etc.)
Q – Quartile (25%) – High damage risk in industrial settings prone to wear and tear (Business cards, banners, flyers, stickers & labels (possible scratches)
H – High (30%) – Harsh conditions & outdoor materials (clothing prints, packaging)




(Ideal for Logo Uploading)

4️⃣ Custom Filename



(Default: QR_Code if left blank)

*Characters NOT allowed in traditional png filenames include “! @ # $ % ^ & * : ; . { } [ ] | < > ? \ / *” because the are often used for programming language instructions

Below is the Code Snippet you can use to insert into your site via HTML blocks

<h2>Generate Your Custom QR Code</h2>

<!-- SECTION 1: URL, Print Size, Quality -->
<div class="section">
    <h3>1️⃣ QR Code Content & Size</h3>
    <label for="qrText">Enter text or URL:</label><br>
    <input type="text" id="qrText" placeholder="Enter text or URL" required /><br><br>

    <label for="qrSize">Select Print Size:</label><br>
    <select id="qrSize">
        <option value="1.5">Small - 1.5" × 1.5"</option>
        <option value="2" selected>Medium - 2" × 2"</option>
        <option value="3">Large - 3" × 3"</option>
        <option value="4">XL - 4" × 4"</option>
    </select><br><br>

    <label for="qrQuality">Select Quality:</label><br>
    <select id="qrQuality">
        <option value="72" selected>Web Quality</option>
        <option value="300">Print Quality</option>
    </select>
</div>

<hr>

<!-- SECTION 2: Padding, Foreground & Background Colors -->
<div class="section">
    <h3>2️⃣ QR Code Styling</h3>
    <label for="qrPadding">Adjust Padding (Border):</label><br>
    <input type="range" id="qrPadding" min="0" max="50" value="10" oninput="updatePaddingValue()">
    <span id="paddingValue">10px</span><br><br>

    <label for="fgColor">Select Foreground Color:</label><br>
    <input type="color" id="fgColor" value="#000000"><br><br>

    <label for="bgColor">Select Background Color:</label><br>
    <input type="color" id="bgColor" value="#ffffff">
</div>

<hr>

<!-- SECTION 3: Advanced Optimization -->
<div class="section">
    <h3>3️⃣ Advanced Optimization</h3>

    <label for="errorCorrection">Select Error Correction Level:</label><br>
    <select id="errorCorrection">
        <option value="L">L - Low (7%)</option>
        <option value="M">M - Medium (15%)</option>
        <option value="Q" selected>Q - Quartile (25%)</option>
        <option value="H">H - High (30%)</option>
    </select><br>
    <span style="font-style: italic; font-size: 14px; display: block; margin-top: 5px;">
        (*Recovers X% of lost or obstructed data in the QR code)<br><br>
Low (75) - Digital use (scanned from screens, no damage expected)
<br>
M - Medium (15%) - Printed materials with minimal wear (magazines, banners, posters etc.)
<br>
Q - Quartile (25%) - High damage risk in industrial settings prone to wear and tear (Business cards, banners, flyers, stickers & labels (possible scratches)
<br>
H - High (30%) - Harsh conditions & outdoor materials (clothing prints, packaging)
<br><br>

    </span><br><br>

    <label for="centerBoxToggle">Add Centered Background Box:</label><br>
    <span style="font-weight: bold; display: block; margin-bottom: 5px;">(Ideal for Logo Uploading)</span>
    <select id="centerBoxToggle" onchange="toggleCenterBoxSize()">
        <option value="no" selected>No</option>
        <option value="yes">Yes</option>
    </select><br><br>

    <div id="centerBoxSizeContainer" style="display: none;">
        <label for="centerBoxSize">Center Box Size (% of QR Code):</label><br>
        <input type="range" id="centerBoxSize" min="15" max="25" value="20" oninput="updateCenterBoxSize()">
        <span id="centerBoxSizeValue">20%</span>
    </div>
</div>

<hr>

<!-- SECTION 4: Custom Filename -->
<div class="section">
    <h3>4️⃣ Custom Filename</h3>
    <label for="filename">Enter Filename (No Extension Needed):</label><br>
    <input type="text" id="filename" placeholder="QR_Code"><br>
    <span style="font-size: 12px; color: gray;">(Default: QR_Code if left blank)<br><br>
*Characters NOT allowed in traditional png filenames include "! @ # $ % ^ & * : ; . { } [ ] | < > ? \ / *" because the are often used for programming language instructions</span>
</div>

<hr>

<!-- Generate Button -->
<div class="section">
    <button class="generate-btn" onclick="generateQR()">Generate QR Code</button>
</div>

<!-- QR Code Display -->
<div id="qrcodeContainer">
    <canvas id="qrCanvas"></canvas>
</div>

<!-- Download Button -->
<div class="section">
    <a id="downloadLink" class="download-btn" style="display:none;">Download QR Code (PNG)</a>
</div>

<style>
    .section {
        margin-bottom: 20px;
    }
    hr {
        margin: 20px 0;
        border: 1px solid #ccc;
    }
    .generate-btn {
        background-color: #28a745;
        color: white;
        font-size: 20px;
        padding: 12px 20px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        display: block;
        margin: 10px auto;
        width: 200px;
    }
    .generate-btn:hover {
        background-color: #218838;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    function generateQR() {
    let text = document.getElementById("qrText").value;
    let sizeInPixels = Math.round(parseFloat(document.getElementById("qrSize").value) * parseInt(document.getElementById("qrQuality").value));
    let padding = parseInt(document.getElementById("qrPadding").value);
    let fgColor = document.getElementById("fgColor").value;
    let bgColor = document.getElementById("bgColor").value;
    let errorCorrection = { "L": QRCode.CorrectLevel.L, "M": QRCode.CorrectLevel.M, "Q": QRCode.CorrectLevel.Q, "H": QRCode.CorrectLevel.H }[document.getElementById("errorCorrection").value];

    let centerBox = document.getElementById("centerBoxToggle").value === "yes";
    let centerBoxSizePercent = parseInt(document.getElementById("centerBoxSize").value);

    let canvasSize = sizeInPixels + padding * 2;
    let canvas = document.createElement("canvas");
    canvas.width = canvasSize;
    canvas.height = canvasSize;
    let ctx = canvas.getContext("2d");

    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvasSize, canvasSize);

    let qrCode = new QRCode(document.createElement("div"), { text, width: sizeInPixels, height: sizeInPixels, colorDark: fgColor, colorLight: bgColor, correctLevel: errorCorrection });

    setTimeout(() => {
        let qrCanvas = qrCode._oDrawing._elCanvas;
        ctx.drawImage(qrCanvas, padding, padding);

        // ✅ Draw Center Box if Enabled
        if (centerBox) {
            let boxSize = (sizeInPixels * centerBoxSizePercent) / 100;
            let boxX = (canvasSize - boxSize) / 2;
            let boxY = (canvasSize - boxSize) / 2;

            ctx.fillStyle = bgColor; // Keep the background color to blend properly
            ctx.fillRect(boxX, boxY, boxSize, boxSize);
        }

        document.getElementById("qrcodeContainer").innerHTML = "";
        document.getElementById("qrcodeContainer").appendChild(canvas);

        let filename = document.getElementById("filename").value.trim() || "QR_Code";
        let pngData = canvas.toDataURL("image/png");

        document.getElementById("downloadLink").href = pngData;
        document.getElementById("downloadLink").download = filename + ".png";
        document.getElementById("downloadLink").style.display = "inline-block";

    }, 500);
}


    function updatePaddingValue() {
        document.getElementById("paddingValue").innerText = document.getElementById("qrPadding").value + "px";
    }

    function updateCenterBoxSize() {
        document.getElementById("centerBoxSizeValue").innerText = document.getElementById("centerBoxSize").value + "%";
    }

    function toggleCenterBoxSize() {
        document.getElementById("centerBoxSizeContainer").style.display = document.getElementById("centerBoxToggle").value === "yes" ? "block" : "none";
    }
</script>
JavaScript