Actualizado 5 junio 2026 · 14 min de lectura
Plantilla de factura HTML + CSS gratis (lista para API)
Necesitas una factura profesional y no quieres pagar por un generador. O eres desarrollador y necesitas una plantilla que puedas integrar con tu sistema de facturación. Aquí tienes 3 plantillas HTML + CSS completas, gratuitas, con código copiable y listas para generar PDFs con una API REST.
Plantilla 1: Factura minimalista (servicios profesionales)
Ideal para freelancers, consultoras y agencias. Diseño limpio, sin distracciones:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #1a1a1a; padding: 40px; }
.header { display: flex; justify-content: space-between; margin-bottom: 40px; }
.empresa { font-size: 24px; font-weight: 700; color: #059669; }
.factura-num { text-align: right; color: #64748b; }
.factura-num strong { display: block; font-size: 20px; color: #1a1a1a; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.datos h3 { font-size: 11px; text-transform: uppercase; color: #94a3b8; margin-bottom: 8px; }
.datos p { font-size: 14px; line-height: 1.6; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th { background: #f8fafc; text-align: left; padding: 12px; font-size: 12px;
text-transform: uppercase; color: #64748b; border-bottom: 2px solid #e2e8f0; }
td { padding: 12px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.total-row td { font-weight: 700; font-size: 16px; border-top: 2px solid #1a1a1a; }
.footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0;
font-size: 12px; color: #94a3b8; text-align: center; }
</style>
</head>
<body>
<div class="header">
<div class="empresa">{{empresa.nombre}}</div>
<div class="factura-num">
<strong>Factura #{{folio}}</strong>
Fecha: {{fecha}}<br>Vence: {{fecha_vencimiento}}
</div>
</div>
<div class="datos">
<div>
<h3>Facturar a</h3>
<p><strong>{{cliente.nombre}}</strong><br>
{{cliente.rfc}}<br>{{cliente.direccion}}<br>{{cliente.email}}</p>
</div>
<div>
<h3>Datos de pago</h3>
<p>Banco: {{pago.banco}}<br>CLABE: {{pago.clabe}}<br>
Referencia: {{folio}}</p>
</div>
</div>
<table>
<thead><tr><th>Concepto</th><th>Cantidad</th><th>Precio</th><th>Total</th></tr></thead>
<tbody>
{{#each items}}
<tr><td>{{descripcion}}</td><td>{{cantidad}}</td>
<td>${{precio}}</td><td>${{total}}</td></tr>
{{/each}}
<tr class="total-row"><td colspan="3">Total</td><td>${{gran_total}}</td></tr>
</tbody>
</table>
<div class="footer">{{empresa.nombre}} · RFC: {{empresa.rfc}} · {{empresa.direccion}}</div>
</body>
</html>Plantilla 2: Factura con desglose fiscal (México CFDI)
Incluye campos para RFC, régimen fiscal, uso CFDI, UUID del timbre y QR del SAT:
<!-- Sección fiscal adicional (agregar antes del footer) -->
<style>
.fiscal { background: #f8fafc; padding: 20px; border-radius: 8px; margin: 20px 0;
font-size: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.fiscal dt { color: #64748b; font-size: 11px; text-transform: uppercase; }
.fiscal dd { font-weight: 600; margin-bottom: 8px; }
.qr-sat { text-align: center; }
.qr-sat img { width: 120px; height: 120px; }
</style>
<div class="fiscal">
<dl>
<dt>UUID</dt><dd>{{cfdi.uuid}}</dd>
<dt>Régimen fiscal emisor</dt><dd>{{cfdi.regimen_emisor}}</dd>
<dt>Uso CFDI</dt><dd>{{cfdi.uso_cfdi}}</dd>
<dt>Método de pago</dt><dd>{{cfdi.metodo_pago}}</dd>
<dt>Forma de pago</dt><dd>{{cfdi.forma_pago}}</dd>
</dl>
<div class="qr-sat">
<img src="{{cfdi.qr_url}}" alt="QR SAT">
<p style="font-size:10px;color:#94a3b8;margin-top:8px">
Cadena original del sello:<br>
<span style="word-break:break-all">{{cfdi.cadena_original}}</span>
</p>
</div>
</div>Plantilla 3: Factura moderna con logo y colores de marca
Profesional, con soporte para logo en base64 y paleta de colores personalizable:
<style>
:root {
--brand-color: #059669; /* Cambia aquí tu color */
--brand-dark: #047857;
--brand-light: #ecfdf5;
}
.header-modern {
background: var(--brand-color); color: white; padding: 30px;
display: flex; justify-content: space-between; align-items: center;
border-radius: 12px 12px 0 0;
}
.header-modern img { height: 40px; }
.header-modern .factura-info { text-align: right; }
.badge { display: inline-block; background: var(--brand-light); color: var(--brand-color);
padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-pagada { background: #dcfce7; color: #15803d; }
.status-pendiente { background: #fef3c7; color: #a16207; }
.status-vencida { background: #fee2e2; color: #dc2626; }
</style>
<div class="header-modern">
<div>
<img src="data:image/svg+xml;base64,{{logo_base64}}" alt="Logo">
<div style="font-size:20px;font-weight:700;margin-top:8px">{{empresa.nombre}}</div>
</div>
<div class="factura-info">
<div style="font-size:28px;font-weight:700">#{{folio}}</div>
<span class="badge {{status_class}}">{{status}}</span>
</div>
</div>Cómo usar las plantillas con la API de Reportia
Las plantillas usan sintaxis Jinja2/Handlebars ({{variable}}). Para generar el PDF, envía tus datos como JSON:
import requests
factura_data = {
"folio": "F-2026-0042",
"fecha": "5 de junio de 2026",
"fecha_vencimiento": "5 de julio de 2026",
"empresa": {
"nombre": "Desarrollo Web MX",
"rfc": "DWM210101ABC",
"direccion": "Av. Insurgentes 456, CDMX"
},
"cliente": {
"nombre": "Restaurante El Buen Sabor",
"rfc": "RBS180515XYZ",
"direccion": "Calle 5 de Mayo 12, Puebla",
"email": "[email protected]"
},
"items": [
{"descripcion": "Desarrollo sitio web", "cantidad": 1, "precio": "15,000.00", "total": "15,000.00"},
{"descripcion": "Mantenimiento mensual (3 meses)", "cantidad": 3, "precio": "2,500.00", "total": "7,500.00"},
{"descripcion": "Dominio + hosting anual", "cantidad": 1, "precio": "1,200.00", "total": "1,200.00"}
],
"subtotal": "23,700.00",
"iva": "3,792.00",
"gran_total": "27,492.00",
"pago": {
"banco": "BBVA México",
"clabe": "012180001234567890"
}
}
response = requests.post(
"https://reportia.4l3.org/v1/render",
json={
"template": "factura-servicios",
"format": "pdf",
"data": factura_data
},
headers={"Authorization": "Bearer TU_API_KEY"}
)
with open(f"factura_{factura_data['folio']}.pdf", "wb") as f:
f.write(response.content)Personalizar colores, fuentes y layout
Cambia las variables CSS para adaptarla a tu marca:
/* Azul corporativo */
:root { --brand-color: #1e40af; --brand-dark: #1e3a8a; --brand-light: #eff6ff; }
/* Rojo moderno */
:root { --brand-color: #dc2626; --brand-dark: #b91c1c; --brand-light: #fef2f2; }
/* Dorado premium */
:root { --brand-color: #a16207; --brand-dark: #854d0e; --brand-light: #fefce8; }Para cambiar la fuente, agrega un @import de Google Fonts al inicio del <style>:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }Genera facturas PDF desde estas plantillas
50 documentos gratis al mes. Envía JSON, recibe PDF.
Probar gratis →Preguntas frecuentes
¿Puedo personalizar los colores y logo de la plantilla?
Sí. La plantilla usa CSS estándar. Cambia los colores, fuentes, logo y layout editando las variables CSS. Al generar el PDF, el diseño se respeta pixel por pixel.
¿Estas plantillas sirven para CFDI en México?
Las plantillas generan la representación impresa (PDF) de una factura. Para CFDI 4.0 necesitas además el XML timbrado por un PAC. La plantilla es compatible: incluye campos para UUID, cadena original, sello y QR del SAT.
¿Puedo usar la plantilla sin la API, solo con HTML local?
Sí. La plantilla es HTML+CSS estándar. Puedes abrirla en cualquier navegador e imprimir a PDF. La API solo automatiza el proceso para generación masiva.
¿Hay plantillas para otros documentos (cotizaciones, notas de crédito)?
Sí. Reportia incluye plantillas para cotizaciones, notas de crédito, recibos de honorarios, contratos y reportes. Puedes ver las plantillas disponibles o crear la tuya.