▣ gerarQR (uso fácil)
Personalize seus QR Codes com cores, gradientes, formatos e logos
Visualização do QR Code
Sua customização aparece aqui
▣ gerarQR no seu projeto web
Nunca vi algo tão simples de implementar
QR Code Padrão
QR Code básico sem customizações
Código Feito:
<img id="gerarQR"
data-value="Bom Dia :)">
Como Aplicar:
<script src="gerarQR.js"</script>
Cores Personalizadas
QR Code 100px com fundo amarelo claro
Código Feito:
<img id="gerarQR"
data-value="Cores Customizadas!"
data-width="100"
data-height="100"
data-color-dark="#444"
data-color-light="#fef3c7">
Bordas Arredondadas
Módulos com cantos suaves e arredondados
Código Feito:
<img id="gerarQR"
data-value="Bordas Arredondadas"
data-border-radius="0.3"
data-color-dark="#059669">
Estilo de Pontos
QR Code com pontos circulares
Código Feito:
<img id="gerarQR"
data-value="Estilo Pontos"
data-dot-style="dots"
data-color-dark="#dc2626">
Gradiente Linear
Gradiente diagonal de roxo para rosa
Código Feito:
<img id="gerarQR"
data-value="Gradiente Linear"
data-gradient-start="#8b5cf6"
data-gradient-end="#ec4899"
data-gradient-type="linear">
Gradiente Radial
Gradiente circular do centro para fora
Código Feito:
<img id="gerarQR"
data-value="Gradiente Radial"
data-gradient-start="#0ea5e9"
data-gradient-end="#6366f1"
data-gradient-type="radial"
data-dot-style="rounded"
data-border-radius="0.25">
Olhos Coloridos
Cantos com cor diferente
Código Feito:
<img id="gerarQR"
data-value="Olhos Customizados"
data-color-dark="#14532d"
data-eye-color="#16a34a"
data-eye-radius="0.2">
Olhos Circulares
Olhos com formato de círculo
Código Feito:
<img id="gerarQR"
data-value="Olhos Circulares!"
data-color-dark="#1e293b"
data-eye-style="circle"
data-eye-color="#ef4444"
data-eye-inner-color="#fbbf24"
data-dot-style="clover">
Olhos Arredondados
Olhos externos e internos arredondados
Código Feito:
<img id="gerarQR"
data-value="Olhos Rounded"
data-color-dark="#581c87"
data-eye-style="rounded"
data-eye-color="#a855f7"
data-eye-inner-color="#e879f9"
data-module-rotate="45">
Com Logo SVG
Logo centralizado no QR Code
Código Feito:
<img id="gerarQR"
data-value="https://site.com"
data-color-dark="#0c4a6e"
data-logo="data:image/svg+xml;utf8,<svg ...>"
data-logo-size="0.25"
data-logo-padding="0.13"
data-dot-style="leaf">
Logo Emoji
Usando emoji como logo
Código Feito:
<img id="gerarQR"
data-value="Emoji no centro!"
data-gradient-start="#059669"
data-gradient-end="#10b981"
data-eye-inner-color="#0c4a6e"
data-dot-style="rounded"
data-border-radius="0.3"
data-logo="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='80' font-size='85' text-anchor='middle'%3E😍%3C/text%3E%3C/svg%3E"
data-logo-size="0.2"
data-logo-shape="circle">
Super Completo
Todas as customizações juntas
Código Feito:
<img id="gerarQR"
data-value="Super Customizado!"
data-gradient-start="#05b"
data-gradient-end="#ef4444"
data-dot-style="rounded"
data-border-radius="0.35"
data-eye-style="circle"
data-eye-color="#7c2d12"
data-eye-inner-color="#fb923c"
data-logo="icone.svg"
data-logo-size="0.22"
data-logo-padding="0.001">
📚 Documentação Completa
🔧 Como Usar (uso livre)
<img id="gerarQR"
data-value="Texto do QR Code"
data-color-dark="#000000"
data-color-light="#ffffff"
data-gradient-start="#8b5cf6"
data-gradient-end="#ec4899"
data-dot-style="rounded"
data-border-radius="0.3"
data-eye-style="circle"
data-eye-color="#7c2d12"
data-eye-inner-color="#fb923c"
data-logo="data:image/base64"
data-logo-size="0.2"
data-logo-shape="circle">
<script src="gerarQR.js"</script>
⚙️ TODAS AS PROPRIEDADES
BÁSICO:
• data-value: Texto/URL (obrigatório)
• data-width: Largura em px (padrão: 1000)
• data-height: Altura em px (padrão: 1000)
• data-correction: L, M, Q, H (padrão: H)
CORES:
• data-color-dark: Cor dos módulos
• data-color-light: Cor de fundo
• data-gradient-start: Cor inicial gradiente
• data-gradient-end: Cor final gradiente
• data-gradient-type: linear ou radial
MÓDULOS:
• data-dot-style: square, dots, clover, leaf
• data-border-radius: 0 a 1
• data-pattern: cross, diamond, star, hexagon
• data-module-gap: 0 a 0.5
• data-module-rotate: -360 a 360 graus
• data-corner-style: square, cut
OLHOS:
• data-eye-style: square, rounded, circle
• data-eye-color: Cor do anel externo
• data-eye-inner-color: Cor do centro
• data-eye-radius: 0 a 1
LOGO:
• data-logo: URL ou data URI
• data-logo-size: 0 a 1 (padrão: 0.2)
• data-logo-shape: square ou circle
• data-logo-padding: 0 a 1 (padrão: 0.1)
EFEITOS:
• data-shadow: true ou false
• data-shadow-color: Cor rgba ou #fff
• data-shadow-blur: Número (padrão: 4)