Canvas Catalog lets institutions offer public-facing courses and programs. One powerful feature is certificates of completion, which you can customize to match your branding and layout preferences.
Requirements Before You Begin
- Admin access to Canvas Catalog.
- A published course or program in your catalog.
- A publicly hosted background certificate image (e.g., yourwebsite/images/certificates/traditional.png).
- A custom HTML template (Provided)
- Basic understanding of HTML/CSS.
Step-by-Step: Adding a Custom Certificate
1. Navigate to Canvas Catalog Admin
- Go to: yourcatalog.region.catalog.canvaslms.com/admin
- Log in as a Catalog Admin.
2. Enable Certificate for a Listing
- Go to the Listings tab.
- Choose the course/program you want to assign the certificate to.
- Click on “Certificate”.
- Enable Include Certificate
- Enter a Certificate Name
3. Select "Custom HTML/CSS"
4. Add Your Custom HTML/CSS Template
- Paste the provided custom code into the HTML editor box.
Custom Template Code:
<!DOCTYPE html>
<html lang="{{locale}}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vintage Certificate of Completion</title>
<!-- Use a suitable fallback font -->
<link rel="preconnect" href="<https://fonts.googleapis.com>">
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
<link href="<https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap>" rel="stylesheet">
<style>
:root {
--skintone-color: #DE9B72;
--dark-color: #3A3D3E;
--main-font: 'Cormorant Garamond', serif;
}
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--dark-color);
}
/* --- New, refactored CSS for the dynamic border --- */
.certificate-container {
position: relative;
/* Set a landscape aspect ratio */
aspect-ratio: 11 / 8.5; /* US Letter landscape ratio */
width: 95%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
/* Adjusted padding for landscape layout */
padding: 4% 6%;
/* Background image and linear gradient */
background-image: url(<https://altersity.odoo.com/web/image/899-e0529c61/output-onlinepngtools.webp>), linear-gradient(to right, rgba(58, 61, 62, 1) 0%, rgba(58, 61, 62, 1) 100%);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* First decorative border (outer) */
border: 2px solid var(--skintone-color);
}
/* Second decorative border (middle) using a pseudo-element */
.certificate-container::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border: 6px solid var(--skintone-color);
}
/* Third decorative border (inner) using a pseudo-element */
.certificate-container::after {
content: '';
position: absolute;
top: 18px;
left: 18px;
right: 18px;
bottom: 18px;
border: 2px solid var(--skintone-color);
}
/* Decorative corner images */
.corner-decoration {
position: absolute;
width: 4em;
height: auto;
}
.corner-left-top { top: 0; left: 0; }
.corner-right-top { top: 0; right: 0; transform: scaleX(-1); }
.corner-left-bottom { bottom: 0; left: 0; transform: scaleY(-1); }
.corner-right-bottom { bottom: 0; right: 0; transform: scale(-1); }
/* Decorative vertical images */
.vertical-decoration {
position: absolute;
width: 16em;
height: auto;
left: 50%;
transform: translateX(-50%);
}
.vertical-decoration.top { top: 0; }
.vertical-decoration.bottom { bottom: 0; transform: scaleY(-1) translateX(-50%); }
/* Typography and content styling */
.skintone-text { color: var(--skintone-color); }
.white-text { color: #fff; }
.logo { width: 12em; margin-bottom: 2rem; }
h1 {
font-size: 2.5em;
letter-spacing: 5px;
padding-top: .5em;
font-family: var(--main-font);
text-transform: uppercase;
}
.lead {
font-size: 1.5rem;
padding-top: 0.5em;
font-family: var(--main-font);
}
p.general {
font-size: 1.25em;
margin-bottom: 0.5em;
line-height: 1.5em;
}
.signature {
margin-top: 2rem;
}
.signature-line {
border-top: 1px solid var(--skintone-color);
padding-top: 0.5em;
display: inline-block;
text-align: center;
width: 15rem;
}
@media (max-width: 768px) {
.certificate-container {
aspect-ratio: 1 / 1.414; /* Switch to portrait for mobile */
height: 95vh;
width: 95%;
padding: 4%;
}
.logo { width: 10em; }
h1 { font-size: 1.8em; }
.lead { font-size: 1.25rem; }
.corner-decoration { width: 2.5em; }
.vertical-decoration { width: 10em; }
}
</style>
</head>
<body>
<!-- The main certificate container that handles all borders -->
<div class="certificate-container">
<!-- Corner and vertical decorations (images should be uploaded to Canvas and paths updated) -->
<img class="corner-decoration corner-left-top" src="<https://i.ibb.co/4mKvK3N/corner-decoration.jpg>" alt="Decoration">
<img class="corner-decoration corner-right-top" src="<https://i.ibb.co/4mKvK3N/corner-decoration.jpg>" alt="Decoration">
<img class="corner-decoration corner-right-bottom" src="<https://i.ibb.co/4mKvK3N/corner-decoration.jpg>" alt="Decoration">
<img class="corner-decoration corner-left-bottom" src="<https://i.ibb.co/4mKvK3N/corner-decoration.jpg>" alt="Decoration">
<img class="vertical-decoration top" src="<https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png>" alt="Decoration">
<img class="vertical-decoration bottom" src="<https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png>" alt="Decoration">
<!-- Certificate Content -->
<img class="logo" src="<https://www.altersity.com/web/image/website/1/logo/altersity?unique=a8464e6>" alt="Altersity">
<h1 class="text-uppercase white-text">{{t.certificate_of_completion}}</h1>
<p class="lead skintone-text">
This is to certify that
</p>
<h2 class="lead white-text" style="font-size: 2.5rem; text-transform: uppercase; margin-bottom: 1rem;">
{{student_name}}
</h2>
<p class="lead skintone-text">
has successfully completed the course
</p>
<p class="general white-text" style="font-size: 2rem; font-weight: bold; margin-bottom: 2rem;">
{{course_name}}
</p>
<p class="skintone-text">on</p>
<p class="white-text" style="font-size: 1.5rem; margin-bottom: 1rem;">
{{completion_date}}
</p>
<div class="signature">
<p class="skintone-text signature-line">
Instructor Name (Created by Iftiaj )
</p>
</div>
</div>
</body>
</html>
Output
5. Customization Options
Here are some design enhancements you can do to improve your custom certificate:
| Feature | Option | Code Change |
|---|---|---|
| Logo | Center | <img src='logo.png' style='width:100px; margin:0 auto;'> |
| Logo | Left Aligned | style='float: left;' |
| Logo | Right Aligned | style='float: right;' |
| Logo | Small/big | width: 10em; /* Increase this value to make the logo bigger, decrease to make it smaller */ |
| Signature lines | Add more roles | Duplicate the .signature div section |
| Fonts | Use Google Fonts | Add <link> in <head> |
| Background | Custom Pattern | Update background-image CSS |
| QR Code | Verification | Add <img src='{{certificate_qr_url}}'> |
6. Save the Certificate Template
- Click Save after pasting your HTML/CSS.
7. Test It
- Enroll in the course with a test account.
- Complete all course requirements.
- Confirm that the certificate appears with your custom design when completed.
Template Variables (Dynamic Data)
Canvas Catalog supports the following variables inside the certificate:
| Variable | Description |
|---|---|
| {{student_name}} | Displays the learner’s full name |
| {{completion_date}} | Displays the date the course was completed |
| {{expiration_date_markup}} | Optional field for expiration date |
| {{t.certificate_of_completion}} | Translatable text "Certificate of Completion" |
| {{t.traditional_award_for}} | Translatable award text |
| {{t.traditional_presented_by}} | Text like "Presented by [Organization]" |
Certificate Background Tips
- Image format: .png or .jpg
- Recommended size: 1123x795 pixels (for printable 11" x 8.5" format)
- Store it in a public asset folder, or host it on a trusted CDN.
Tips for Better Design
- Use a serif font like Georgia for formality.
- Avoid heavy colors or too many styles; simplicity looks professional.
- Align your text margins with empty space in the background image.
- Test for printing (PDF download support) if learners will print certificates.
Final Checklist
- [ ] Certificate feature enabled ✅
- [ ] Custom HTML/CSS added ✅
- [ ] Background image hosted ✅. Note: Catalog will use to Catalog Logo by default. Unless you change it.
- [ ] Variables render correctly ✅
- [ ] Test with a learner account ✅
Click Here to get all premium custom certificate templates
Subscribe to my newsletter
