Certificate of completion HTML template

A landscape A4 certificate of completion in HTML and CSS with a double border and signature lines. Generate one PDF per attendee via API.

Convert this to PDF → Download .html

Paper: A4 landscape · preview scaled to fit

Render it with the API

curl https://html-pdf.com/v1/pdf \
  -H "Authorization: Bearer $HTML_PDF_KEY" \
  -F "index.html=@certificate.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o certificate.pdf

Or ask your AI agent: "Make me a certificate PDF using the html-pdf.com certificate template." · Guides · API reference

Tips

Uses @page { size: A4 landscape; margin: 0 }, so send "prefer_css_page_size": true.
Loop over attendees and call the API once per name, or let your AI agent do it from a spreadsheet.
Swap Georgia for a web font by linking Google Fonts with an absolute https URL.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Certificate of Completion</title>
<style>
  @page { size: A4 landscape; margin: 0; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { margin: 0; width: 297mm; height: 210mm; }
  body { font-family: Georgia, "Times New Roman", serif; color: #1a1a1a; display: flex; align-items: center; justify-content: center; background: #fbf8f1; }
  .frame { width: 271mm; height: 184mm; border: 2px solid #1a1a1a; outline: 1px solid #1a1a1a; outline-offset: -8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24mm; }
  .kicker { font-family: Helvetica, Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; font-size: 11px; color: #777; }
  h1 { font-size: 46px; font-weight: 400; margin: 10px 0 26px; }
  .name { font-size: 38px; font-style: italic; border-bottom: 1px solid #1a1a1a; padding: 0 40px 6px; margin: 8px 0 18px; }
  p { font-size: 15px; max-width: 170mm; line-height: 1.6; margin: 0; }
  .sign { display: flex; gap: 70mm; margin-top: 26mm; font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #555; }
  .sign div { border-top: 1px solid #1a1a1a; padding-top: 6px; width: 60mm; }
  @media screen {
    html { background: #e9e9e7; }
    html, body { width: auto; height: auto; }
    body { padding: 24px 0; }
    .frame { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); }
  }
</style>
</head>
<body>
  <div class="frame">
    <div class="kicker">Certificate of completion</div>
    <h1>Advanced HTML &amp; CSS</h1>
    <div class="kicker">This certifies that</div>
    <div class="name">Jordan Example</div>
    <p>has successfully completed the 24-hour course <strong>Advanced HTML &amp; CSS for Print</strong>, including layout, typography and page-break techniques.</p>
    <div class="sign"><div>Course instructor</div><div>October 10, 2026</div></div>
  </div>
</body>
</html>

More templates

Invoice · Receipt · Report · Resume · Proposal · Packing slip · Shipping label · Event ticket · Quote · Purchase order · Timesheet · all templates