Need to make a QR code? This simple page will help you create a simple QR code for others to scan. Example: Create a Google Doc with information like contact, medical etc., then get the share link. Paste the share link into the URL box so that others can scan the QR code to go to the document. No information is saved to this site or anywhere else.
QR Code Generator
Enter a URL and optional titles to generate a scannable QR code.
Sample Output
Here is the code if you just want to do this on your own computer. Just copy the code, paste into a text editor and save as an html file.
QR Code Generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
}
/* Custom styles for the container to ensure it's centered and has a nice shadow */
.container {
max-width: 28rem; /* Equivalent to md:max-w-md in Tailwind */
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">
<div class="container bg-white p-8 rounded-2xl shadow-xl space-y-6">
<h2 class="text-3xl font-bold text-gray-800 text-center">QR Code Generator</h2>
<p class="text-sm text-gray-600 text-center">
Enter a URL and optional titles to generate a scannable QR code.
</p>
<!-- Input and button container -->
<div class="flex flex-col space-y-4">
<label for="top-title-input" class="text-sm font-medium text-gray-700">Title Above QR Code</label>
<input
type="text"
id="top-title-input"
placeholder="e.g., Scan Me"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
/>
<label for="bottom-title-input" class="text-sm font-medium text-gray-700">Title Below QR Code</label>
<input
type="text"
id="bottom-title-input"
placeholder="e.g., Medical Information"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
/>
<label for="url-input" class="text-sm font-medium text-gray-700">Link for QR Code</label>
<input
type="url"
id="url-input"
placeholder="e.g., https://www.google.com"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
/>
<!-- Options for output format -->
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-2">
<input type="checkbox" id="business-card-checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="business-card-checkbox" class="text-sm font-medium text-gray-700">Business Card (3.5" x 2")</label>
</div>
<div class="flex items-center space-x-2">
<input type="checkbox" id="lockscreen-checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label for="lockscreen-checkbox" class="text-sm font-medium text-gray-700">Phone Lock Screen (1080x1920)</label>
</div>
</div>
<!-- Color pickers -->
<div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-4">
<div class="flex-1">
<label for="bgcolor-input" class="text-sm font-medium text-gray-700">Canvas Background Color</label>
<input type="color" id="bgcolor-input" value="#ffffff" class="w-full h-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200">
</div>
<div class="flex-1">
<label for="textcolor-input" class="text-sm font-medium text-gray-700">Text Color</label>
<input type="color" id="textcolor-input" value="#000000" class="w-full h-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200">
</div>
</div>
<button
id="generate-btn"
class="w-full px-4 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200 active:scale-95"
>
Generate QR Code
</button>
</div>
<!-- Generated QR code and message display area -->
<div class="mt-8 flex flex-col items-center justify-center space-y-4">
<div id="qr-code-container" class="p-4 rounded-lg hidden flex-col items-center justify-center space-y-4">
<!-- Titles and QR code will be dynamically generated here -->
</div>
<p id="message" class="text-gray-500 text-sm hidden">Generating QR code...</p>
<a
id="download-link"
href="#"
download="qrcode.png"
class="hidden px-4 py-2 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-all duration-200 active:scale-95"
>
Download QR Code
</a>
</div>
<!-- Sample Output Section -->
<hr class="my-6 border-t-2 border-gray-200">
<div class="flex flex-col items-center justify-center space-y-4">
<h2 class="text-2xl font-bold text-gray-800">Sample Output</h2>
<img id="sample-image" src="" alt="Sample QR Code with titles" class="w-[300px] h-auto">
</div>
</div>
<!-- QR Code Library from CDN -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
// Get references to HTML elements
const urlInput = document.getElementById('url-input');
const topTitleInput = document.getElementById('top-title-input');
const bottomTitleInput = document.getElementById('bottom-title-input');
const businessCardCheckbox = document.getElementById('business-card-checkbox');
const lockscreenCheckbox = document.getElementById('lockscreen-checkbox');
const bgcolorInput = document.getElementById('bgcolor-input');
const textcolorInput = document.getElementById('textcolor-input');
const generateBtn = document.getElementById('generate-btn');
const qrCodeContainer = document.getElementById('qr-code-container');
const messageElement = document.getElementById('message');
const downloadLink = document.getElementById('download-link');
const sampleImageElement = document.getElementById('sample-image');
// Function to create a composite image with titles and QR code
function createCompositeImage(qrCodeCanvas, topTitle, bottomTitle, addBorder, addLockscreen, bgColor, textColor) {
const qrSize = qrCodeCanvas.width;
const compositeCanvas = document.createElement('canvas');
const ctx = compositeCanvas.getContext('2d');
let finalWidth, finalHeight, titleFontSize, qrCodeSize, borderSize;
if (addLockscreen) {
// Phone lock screen dimensions (1080 x 1920)
finalWidth = 1080;
finalHeight = 1920;
titleFontSize = 60;
qrCodeSize = 600;
borderSize = 0; // No border for lockscreen
} else if (addBorder) {
// Business card dimensions at 300 DPI (3.5" x 2")
finalWidth = 1050;
finalHeight = 600;
titleFontSize = 40;
qrCodeSize = 400;
borderSize = 10;
} else {
// Default dynamic sizing
finalWidth = qrSize + 40;
finalHeight = qrSize + (topTitle ? 34 : 0) + (bottomTitle ? 34 : 0) + 40;
titleFontSize = 24;
qrCodeSize = qrSize;
borderSize = 0;
}
compositeCanvas.width = finalWidth;
compositeCanvas.height = finalHeight;
// Fill the entire canvas with the selected background color
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, finalWidth, finalHeight);
// Calculate dimensions for the white content box
const contentBoxPadding = 20;
const contentBoxWidth = Math.max(qrCodeSize, ctx.measureText(topTitle).width, ctx.measureText(bottomTitle).width) + (contentBoxPadding * 2);
const contentBoxHeight = qrCodeSize + (topTitle ? titleFontSize + contentBoxPadding : 0) + (bottomTitle ? titleFontSize + contentBoxPadding : 0) + (contentBoxPadding * 2);
const contentBoxX = (finalWidth - contentBoxWidth) / 2;
const contentBoxY = (finalHeight - contentBoxHeight) / 2;
// Draw the white content box with rounded corners
ctx.fillStyle = '#ffffff';
ctx.roundRect(contentBoxX, contentBoxY, contentBoxWidth, contentBoxHeight, 15);
ctx.fill();
let currentY = contentBoxY + contentBoxPadding;
// Draw top title
if (topTitle) {
ctx.fillStyle = textColor;
ctx.font = `bold ${titleFontSize}px Inter, sans-serif`;
ctx.textAlign = 'center';
ctx.fillText(topTitle, finalWidth / 2, currentY + titleFontSize);
currentY += titleFontSize + contentBoxPadding;
}
// Draw QR code
const qrCodeX = (finalWidth - qrCodeSize) / 2;
ctx.drawImage(qrCodeCanvas, qrCodeX, currentY, qrCodeSize, qrCodeSize);
currentY += qrCodeSize;
// Draw bottom title
if (bottomTitle) {
currentY += contentBoxPadding;
ctx.fillStyle = textColor;
ctx.font = `bold ${titleFontSize}px Inter, sans-serif`;
ctx.textAlign = 'center';
ctx.fillText(bottomTitle, finalWidth / 2, currentY + titleFontSize);
}
return compositeCanvas.toDataURL('image/png');
}
// Function to generate the QR code and the full image
function generateQRCode() {
const url = urlInput.value.trim();
const topTitle = topTitleInput.value.trim();
const bottomTitle = bottomTitleInput.value.trim();
const addBorder = businessCardCheckbox.checked;
const addLockscreen = lockscreenCheckbox.checked;
const bgColor = bgcolorInput.value;
const textColor = textcolorInput.value;
qrCodeContainer.innerHTML = '';
qrCodeContainer.classList.add('hidden');
downloadLink.classList.add('hidden');
if (url) {
messageElement.textContent = 'Generating QR code...';
messageElement.classList.remove('hidden');
try {
setTimeout(() => {
const tempContainer = document.createElement('div');
new QRCode(tempContainer, {
text: url,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff", // QR code background is now always white
correctLevel: QRCode.CorrectLevel.H
});
const qrCodeCanvas = tempContainer.querySelector('canvas');
if (qrCodeCanvas) {
// Create and display the final composite image
const imageUrl = createCompositeImage(qrCodeCanvas, topTitle, bottomTitle, addBorder, addLockscreen, bgColor, textColor);
qrCodeContainer.innerHTML = `<img src="${imageUrl}" alt="Generated QR Code with titles" class="w-64 h-auto">`;
// Set the download link
downloadLink.href = imageUrl;
downloadLink.classList.remove('hidden');
qrCodeContainer.classList.remove('hidden');
}
messageElement.classList.add('hidden');
}, 500);
} catch (error) {
messageElement.textContent = 'Error: Could not generate QR code. Please check the URL.';
messageElement.classList.remove('hidden');
console.error("QR Code generation error:", error);
}
} else {
messageElement.textContent = 'Please enter a valid URL.';
messageElement.classList.remove('hidden');
}
}
// Generate a sample QR code on page load
window.addEventListener('load', () => {
const tempContainer = document.createElement('div');
new QRCode(tempContainer, {
text: "https://www.google.com",
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
const qrCodeCanvas = tempContainer.querySelector('canvas');
if (qrCodeCanvas) {
// Using a light gray background for the sample to demonstrate the white box
const sampleUrl = createCompositeImage(qrCodeCanvas, "Scan Me", "Medical Information", true, false, "#f3f4f6", "#000000");
sampleImageElement.src = sampleUrl;
}
});
// Add event listener to the button
generateBtn.addEventListener('click', generateQRCode);
// Allow pressing Enter to trigger the generation
urlInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
generateQRCode();
}
});
// Event listener to ensure only one special format is selected at a time
businessCardCheckbox.addEventListener('change', () => {
if (businessCardCheckbox.checked) {
lockscreenCheckbox.checked = false;
}
});
lockscreenCheckbox.addEventListener('change', () => {
if (lockscreenCheckbox.checked) {
businessCardCheckbox.checked = false;
}
});
</script>
</body>
</html>