| FUNBREW PDF

Invalid Date

The hardest part of generating certificate PDFs is designing the template. Building a professional-looking certificate from scratch with HTML and CSS takes more time than most developers expect.

This article provides 5 copy-paste-ready HTML certificate templates covering the most common certificate types: completion, award, diploma, attendance, and professional certification. Render them with the FUNBREW PDF API and you'll have production-quality PDFs in seconds.

For the full certificate automation pipeline — from template design to bulk issuance — see our Certificate PDF Automation Guide. For batch processing details, check the PDF Batch Processing Guide. Template engine patterns are covered in the PDF Template Engine Guide.

How to Use These Templates

Each template works in three steps.

1. Copy the HTML

Copy the template code and paste it into your project.

2. Replace the Placeholders

Swap {{name}}, {{date}}, and other placeholders with real data. Use a template engine (Handlebars, Jinja2, Blade, etc.) to automate this step.

3. Render with the PDF API

curl -X POST https://pdf.funbrew.cloud/api/pdf/generate \
  -H "Authorization: Bearer sk-your-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<YOUR_TEMPLATE_HTML>",
    "options": {
      "page-size": "A4",
      "orientation": "landscape"
    }
  }' \
  --output certificate.pdf

See implementation examples in more languages in our quickstart by language guide.

Template 1: Completion Certificate

A standard completion certificate for corporate training, online courses, or bootcamps.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  @page {
    size: A4 landscape;
    margin: 0;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: "Georgia", "Times New Roman", serif;
    background: #fff;
  }
  .certificate {
    width: 297mm;
    height: 210mm;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .border-frame {
    position: absolute;
    top: 10mm;
    left: 10mm;
    right: 10mm;
    bottom: 10mm;
    border: 3px double #1a365d;
  }
  .inner-frame {
    position: absolute;
    top: 15mm;
    left: 15mm;
    right: 15mm;
    bottom: 15mm;
    border: 1px solid #c4a35a;
  }
  .content {
    position: relative;
    z-index: 1;
    padding: 30mm 40mm;
  }
  .label {
    font-size: 14pt;
    color: #666;
    letter-spacing: 0.5em;
    margin-bottom: 10mm;
    text-transform: uppercase;
  }
  .title {
    font-size: 36pt;
    color: #1a365d;
    font-weight: bold;
    margin-bottom: 15mm;
    letter-spacing: 0.1em;
  }
  .recipient {
    font-size: 24pt;
    color: #333;
    border-bottom: 2px solid #1a365d;
    padding-bottom: 3mm;
    margin-bottom: 10mm;
    display: inline-block;
    min-width: 150mm;
  }
  .description {
    font-size: 12pt;
    color: #555;
    line-height: 2;
    margin-bottom: 15mm;
    max-width: 200mm;
  }
  .date {
    font-size: 11pt;
    color: #666;
    margin-bottom: 8mm;
  }
  .organization {
    font-size: 14pt;
    color: #1a365d;
    font-weight: bold;
  }
</style>
</head>
<body>
<div class="certificate">
  <div class="border-frame"></div>
  <div class="inner-frame"></div>
  <div class="content">
    <div class="label">Certificate of Completion</div>
    <div class="title">Certificate</div>
    <div class="recipient">{{name}}</div>
    <div class="description">
      has successfully completed all requirements for<br>
      <strong>{{course_name}}</strong>
    </div>
    <div class="date">{{date}}</div>
    <div class="organization">{{organization}}</div>
  </div>
</div>
</body>
</html>

Customization tips:

Change border-frame color for different formality levels (navy: corporate, gold: ceremonial)
Update font-family to match your brand
Add a logo image inside .content

Template 2: Award Certificate

For employee recognition, contest winners, and achievement awards. Gold accents add a sense of prestige.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  @page {
    size: A4 landscape;
    margin: 0;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: "Georgia", "Times New Roman", serif;
    background: #fffef7;
  }
  .certificate {
    width: 297mm;
    height: 210mm;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .gold-border {
    position: absolute;
    top: 8mm;
    left: 8mm;
    right: 8mm;
    bottom: 8mm;
    border: 4px solid #c4a35a;
    border-radius: 2mm;
  }
  .gold-inner {
    position: absolute;
    top: 12mm;
    left: 12mm;
    right: 12mm;
    bottom: 12mm;
    border: 1px solid #d4b86a;
  }
  .content {
    position: relative;
    z-index: 1;
    padding: 25mm 40mm;
  }
  .title {
    font-size: 40pt;
    color: #8b6914;
    font-weight: bold;
    margin-bottom: 15mm;
    letter-spacing: 0.2em;
  }
  .presented-to {
    font-size: 12pt;
    color: #666;
    margin-bottom: 5mm;
    text-transform: uppercase;
    letter-spacing: 0.3em;
  }
  .recipient {
    font-size: 28pt;
    color: #333;
    border-bottom: 2px solid #c4a35a;
    padding-bottom: 3mm;
    margin-bottom: 12mm;
    display: inline-block;
    min-width: 150mm;
  }
  .reason {
    font-size: 13pt;
    color: #444;
    line-height: 2;
    margin-bottom: 15mm;
    max-width: 220mm;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 200mm;
  }
  .date-block {
    font-size: 11pt;
    color: #666;
    text-align: left;
  }
  .signer {
    text-align: right;
    font-size: 12pt;
    color: #333;
  }
  .signer-name {
    font-size: 16pt;
    font-weight: bold;
    margin-top: 2mm;
  }
</style>
</head>
<body>
<div class="certificate">
  <div class="gold-border"></div>
  <div class="gold-inner"></div>
  <div class="content">
    <div class="title">Award</div>
    <div class="presented-to">Presented to</div>
    <div class="recipient">{{name}}</div>
    <div class="reason">
      {{reason}}
    </div>
    <div class="footer">
      <div class="date-block">{{date}}</div>
      <div class="signer">
        {{organization}}<br>
        <span class="signer-name">{{signer_name}}</span>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Customization tips:

Place a company seal or trophy icon above the title
The reason field supports multiple lines for detailed award descriptions
For signature images, use transparent PNGs

Template 3: Diploma

A formal diploma template for educational institutions, bootcamps, and certification programs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  @page {
    size: A4 landscape;
    margin: 0;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: "Georgia", "Times New Roman", serif;
    background: #fefcf3;
  }
  .diploma {
    width: 297mm;
    height: 210mm;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #fefcf3 0%, #f5f0e1 100%);
  }
  .ornate-border {
    position: absolute;
    top: 6mm;
    left: 6mm;
    right: 6mm;
    bottom: 6mm;
    border: 2px solid #8b6914;
  }
  .ornate-border::before {
    content: '';
    position: absolute;
    top: 3mm;
    left: 3mm;
    right: 3mm;
    bottom: 3mm;
    border: 1px solid #c4a35a;
  }
  .content {
    position: relative;
    z-index: 1;
    padding: 20mm 45mm;
  }
  .institution {
    font-size: 16pt;
    color: #1a365d;
    letter-spacing: 0.3em;
    margin-bottom: 8mm;
    font-weight: bold;
  }
  .title {
    font-size: 32pt;
    color: #1a365d;
    font-weight: bold;
    margin-bottom: 10mm;
    letter-spacing: 0.15em;
    border-bottom: 2px solid #c4a35a;
    padding-bottom: 5mm;
    display: inline-block;
  }
  .conferral {
    font-size: 12pt;
    color: #555;
    margin-bottom: 8mm;
    line-height: 1.8;
  }
  .recipient {
    font-size: 26pt;
    color: #1a365d;
    font-weight: bold;
    margin-bottom: 8mm;
  }
  .degree {
    font-size: 14pt;
    color: #444;
    margin-bottom: 5mm;
    font-style: italic;
  }
  .description {
    font-size: 11pt;
    color: #666;
    line-height: 1.8;
    margin-bottom: 12mm;
    max-width: 200mm;
  }
  .signatures {
    display: flex;
    justify-content: space-around;
    width: 220mm;
    margin-top: 10mm;
  }
  .sig-block {
    text-align: center;
    min-width: 60mm;
  }
  .sig-line {
    border-top: 1px solid #999;
    padding-top: 2mm;
    font-size: 10pt;
    color: #666;
  }
  .sig-title {
    font-size: 9pt;
    color: #999;
    margin-top: 1mm;
  }
  .date {
    font-size: 11pt;
    color: #666;
    margin-top: 5mm;
  }
</style>
</head>
<body>
<div class="diploma">
  <div class="ornate-border"></div>
  <div class="content">
    <div class="institution">{{institution}}</div>
    <div class="title">Diploma</div>
    <div class="conferral">This is to certify that</div>
    <div class="recipient">{{name}}</div>
    <div class="degree">{{degree}}</div>
    <div class="description">
      has fulfilled all requirements prescribed for the above degree
      in the {{program}} program.
    </div>
    <div class="signatures">
      <div class="sig-block">
        <div class="sig-line">{{dean_name}}</div>
        <div class="sig-title">Dean</div>
      </div>
      <div class="sig-block">
        <div class="sig-line">{{president_name}}</div>
        <div class="sig-title">President</div>
      </div>
    </div>
    <div class="date">{{date}}</div>
  </div>
</div>
</body>
</html>

Customization tips:

Add a university seal or logo image above .institution
Dynamically change the degree title (Bachelor, Master, Doctorate)
Add honors notation (cum laude, magna cum laude) below the degree

Template 4: Event Attendance Certificate

A modern attendance certificate for seminars, conferences, and workshops. Includes a QR code placement area for verification.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  @page {
    size: A4 landscape;
    margin: 0;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: #fff;
  }
  .certificate {
    width: 297mm;
    height: 210mm;
    position: relative;
    overflow: hidden;
  }
  .accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 15mm;
    height: 100%;
    background: linear-gradient(180deg, #2563eb, #7c3aed);
  }
  .accent-top {
    position: absolute;
    top: 0;
    left: 15mm;
    right: 0;
    height: 3mm;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
  }
  .content {
    margin-left: 30mm;
    margin-right: 25mm;
    padding-top: 25mm;
    position: relative;
  }
  .event-badge {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    padding: 2mm 5mm;
    border-radius: 2mm;
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 8mm;
  }
  .title {
    font-size: 30pt;
    color: #1e293b;
    font-weight: bold;
    margin-bottom: 12mm;
  }
  .subtitle {
    font-size: 14pt;
    color: #64748b;
    margin-bottom: 5mm;
  }
  .recipient-name {
    font-size: 28pt;
    color: #1e293b;
    font-weight: bold;
    border-bottom: 3px solid #2563eb;
    padding-bottom: 3mm;
    display: inline-block;
    margin-bottom: 10mm;
  }
  .description {
    font-size: 12pt;
    color: #64748b;
    line-height: 2;
    margin-bottom: 15mm;
    max-width: 200mm;
  }
  .meta {
    display: flex;
    gap: 20mm;
    margin-bottom: 15mm;
  }
  .meta-item {
    font-size: 10pt;
    color: #94a3b8;
  }
  .meta-value {
    font-size: 12pt;
    color: #334155;
    font-weight: bold;
    margin-top: 1mm;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .organizer {
    font-size: 14pt;
    color: #1e293b;
    font-weight: bold;
  }
  .qr-placeholder {
    width: 25mm;
    height: 25mm;
    border: 1px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8pt;
    color: #94a3b8;
  }
</style>
</head>
<body>
<div class="certificate">
  <div class="accent-bar"></div>
  <div class="accent-top"></div>
  <div class="content">
    <div class="event-badge">{{event_type}}</div>
    <div class="title">Certificate of Attendance</div>
    <div class="subtitle">This certifies that</div>
    <div class="recipient-name">{{name}}</div>
    <div class="description">
      attended and completed all sessions of <strong>{{event_name}}</strong>.
    </div>
    <div class="meta">
      <div class="meta-item">
        Date<br>
        <span class="meta-value">{{event_date}}</span>
      </div>
      <div class="meta-item">
        Venue<br>
        <span class="meta-value">{{venue}}</span>
      </div>
      <div class="meta-item">
        Duration<br>
        <span class="meta-value">{{duration}}</span>
      </div>
    </div>
    <div class="footer">
      <div class="organizer">{{organization}}</div>
      <div class="qr-placeholder">QR Code</div>
    </div>
  </div>
</div>
</body>
</html>

Customization tips:

Change accent-bar gradient colors to match your brand
Replace the QR placeholder with an <img> tag pointing to a verification URL
Add CPD/CEU credit hours in the meta section

Template 5: Professional Credential Certificate

For technical certifications, professional qualifications, and accreditations. Includes fields for credential number and expiration date.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  @page {
    size: A4 portrait;
    margin: 0;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: #fff;
  }
  .certificate {
    width: 210mm;
    height: 297mm;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header-band {
    width: 100%;
    height: 40mm;
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-text {
    color: #fff;
    font-size: 12pt;
    letter-spacing: 0.5em;
    text-transform: uppercase;
  }
  .body-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15mm 25mm;
    text-align: center;
  }
  .cert-title {
    font-size: 28pt;
    color: #0f172a;
    font-weight: bold;
    margin-bottom: 10mm;
    letter-spacing: 0.1em;
  }
  .divider {
    width: 60mm;
    height: 1px;
    background: #c4a35a;
    margin-bottom: 10mm;
  }
  .conferral-text {
    font-size: 11pt;
    color: #64748b;
    margin-bottom: 8mm;
  }
  .recipient-name {
    font-size: 24pt;
    color: #0f172a;
    font-weight: bold;
    margin-bottom: 10mm;
  }
  .qualification {
    font-size: 16pt;
    color: #1e3a5f;
    font-weight: bold;
    margin-bottom: 5mm;
  }
  .qualification-detail {
    font-size: 11pt;
    color: #64748b;
    margin-bottom: 15mm;
    line-height: 1.8;
    max-width: 150mm;
  }
  .cert-details {
    display: flex;
    gap: 15mm;
    margin-bottom: 15mm;
    font-size: 10pt;
  }
  .detail-box {
    border: 1px solid #e2e8f0;
    padding: 3mm 6mm;
    border-radius: 2mm;
  }
  .detail-label {
    color: #94a3b8;
    font-size: 8pt;
  }
  .detail-value {
    color: #334155;
    font-weight: bold;
    margin-top: 1mm;
  }
  .footer-band {
    width: 100%;
    padding: 8mm 25mm;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    box-sizing: border-box;
  }
  .issuer {
    font-size: 11pt;
    color: #334155;
    font-weight: bold;
  }
  .verify-text {
    font-size: 8pt;
    color: #94a3b8;
  }
</style>
</head>
<body>
<div class="certificate">
  <div class="header-band">
    <div class="header-text">Professional Certification</div>
  </div>
  <div class="body-content">
    <div class="cert-title">Certificate</div>
    <div class="divider"></div>
    <div class="conferral-text">This is to certify that</div>
    <div class="recipient-name">{{name}}</div>
    <div class="qualification">{{qualification_name}}</div>
    <div class="qualification-detail">{{qualification_detail}}</div>
    <div class="cert-details">
      <div class="detail-box">
        <div class="detail-label">Credential ID</div>
        <div class="detail-value">{{cert_number}}</div>
      </div>
      <div class="detail-box">
        <div class="detail-label">Issue Date</div>
        <div class="detail-value">{{issue_date}}</div>
      </div>
      <div class="detail-box">
        <div class="detail-label">Expiry Date</div>
        <div class="detail-value">{{expiry_date}}</div>
      </div>
    </div>
  </div>
  <div class="footer-band">
    <div class="issuer">{{organization}}</div>
    <div class="verify-text">Verify at: {{verify_url}}</div>
  </div>
</div>
</body>
</html>

Customization tips:

Change header-band color to match your brand
Add more fields to cert-details (level, score, specialization)
Portrait orientation prints well on standard A4 paper
Add a QR code in the footer-band for verification links

API Integration

Rendering with curl

# Read template file and send to API
HTML=$(cat certificate-template.html)
curl -X POST https://pdf.funbrew.cloud/api/pdf/generate \
  -H "Authorization: Bearer sk-your-api-key" \
  -H "Content-Type: application/json" \
  -d "{
    \"html\": $(echo "$HTML" | jq -Rs .),
    \"options\": {
      \"page-size\": \"A4\",
      \"orientation\": \"landscape\"
    }
  }" \
  --output certificate.pdf

Batch Generation with Node.js

const fs = require('fs');
const Handlebars = require('handlebars');

async function batchGenerateCertificates(recipients) {
  const templateHtml = fs.readFileSync('certificate-template.html', 'utf-8');
  const template = Handlebars.compile(templateHtml);

  for (const recipient of recipients) {
    const html = template({
      name: recipient.name,
      course_name: recipient.course,
      date: new Date().toLocaleDateString('en-US'),
      organization: 'Tech Corp'
    });

    const response = await fetch('https://pdf.funbrew.cloud/api/pdf/generate', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.PDF_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        html,
        options: { 'page-size': 'A4', 'orientation': 'landscape' }
      })
    });

    const pdf = await response.arrayBuffer();
    fs.writeFileSync(`certificates/${recipient.id}.pdf`, Buffer.from(pdf));
  }
}

Batch Generation with Python

import requests
from jinja2 import Template

def batch_generate(recipients, template_path):
    with open(template_path) as f:
        template = Template(f.read())

    for recipient in recipients:
        html = template.render(
            name=recipient['name'],
            course_name=recipient['course'],
            date='April 16, 2026',
            organization='Tech Corp'
        )

        response = requests.post(
            'https://pdf.funbrew.cloud/api/pdf/generate',
            headers={
                'Authorization': f'Bearer {API_KEY}',
                'Content-Type': 'application/json',
            },
            json={
                'html': html,
                'options': {'page-size': 'A4', 'orientation': 'landscape'}
            }
        )

        with open(f"certificates/{recipient['id']}.pdf", 'wb') as f:
            f.write(response.content)

For batch processing best practices — concurrency control, error handling, retries — see the PDF Batch Processing Guide.

Template Customization Tips

Font Selection

Choose fonts that match the formality level of your certificate.

Use Case	Recommended Fonts	Why
Completion & Awards	Georgia, Times New Roman	Traditional, formal feel
Attendance & Credentials	Helvetica Neue, Arial	Modern, clean, readable
Multilingual	Noto Sans, Noto Serif	Full Unicode coverage

For Japanese font handling, see the Japanese Font Guide.

Color Palettes

Style	Primary	Accent	Background
Formal (Navy)	#1a365d	#c4a35a (Gold)	#fff
Formal (Black)	#0f172a	#c4a35a (Gold)	#fefcf3
Modern (Blue)	#2563eb	#7c3aed (Purple)	#fff
Natural (Green)	#166534	#d4a574 (Brown)	#fafaf5

Paper Size and Orientation

Certificate Type	Recommended Size	Orientation
Completion, Award, Diploma	A4	Landscape
Professional Credential	A4	Portrait
Attendance (card-style)	A5	Landscape

Specify in the API options:

{
  "options": {
    "page-size": "A4",
    "orientation": "landscape"
  }
}

CSS Page Break Control

Ensure each certificate fits on exactly one page. When generating multiple certificates in a single PDF:

.certificate {
  page-break-after: always;
}
.certificate:last-child {
  page-break-after: avoid;
}

For more CSS page break techniques, see HTML to PDF CSS Snippets.

Frequently Asked Questions

What if fonts don't render correctly in the template?

When rendering server-side, local fonts may not be available. Load web fonts via @import from Google Fonts, or embed font files as Base64. See the Japanese Font Guide for detailed solutions.

How do I add a QR code to a certificate?

Place a QR code image using an <img> tag. Generate QR codes using a library like qrcode.js or an external API. Replace Template 4's qr-placeholder with <img src="{{qr_url}}" width="25mm" height="25mm">.

How can I efficiently generate thousands of certificates?

For 100+ certificates, control parallelism and use a queue system (Redis, SQS, etc.) to stay within rate limits. See the PDF Batch Processing Guide and Production Guide for details.

Can I change the template to A3 or Letter size?

Yes. Update the @page rule's size and the API's options.page-size. For example: size: A3 landscape; / "page-size": "A3". Letter size: size: letter landscape; / "page-size": "Letter".

Summary

The 5 templates in this article give you a ready-made starting point for any certificate use case.

Template	Use Case	Orientation
Completion	Training, courses	Landscape
Award	Recognition, contests	Landscape
Diploma	Graduation, degrees	Landscape
Attendance	Seminars, conferences	Landscape
Credential	Certifications, qualifications	Portrait

With FUNBREW PDF, you can render these templates server-side and automate the entire issuance pipeline. Start by testing your template in the Playground.

Certificate PDF Automation Guide -- From template design to bulk issuance
PDF Batch Processing Guide -- Best practices for large-scale PDF generation
PDF Template Engine Guide -- Data binding with Handlebars, Jinja2 & more
HTML to PDF CSS Snippets -- Page breaks, margins, and font control
Japanese Font Guide -- Handling CJK fonts in PDF generation
Quickstart by Language -- curl, Python, Node.js & PHP examples

How to Use These Templates

1. Copy the HTML

2. Replace the Placeholders

3. Render with the PDF API

Template 1: Completion Certificate

Template 2: Award Certificate

Template 3: Diploma

Template 4: Event Attendance Certificate

Template 5: Professional Credential Certificate

API Integration

Rendering with curl

Batch Generation with Node.js

Batch Generation with Python

Template Customization Tips

Font Selection

Color Palettes

Paper Size and Orientation

CSS Page Break Control

Frequently Asked Questions

What if fonts don't render correctly in the template?

How do I add a QR code to a certificate?

How can I efficiently generate thousands of certificates?

Can I change the template to A3 or Letter size?

Summary

Related Articles