Skip to Content

How to Make Custom Certificate in Canvas Catalog

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

Canvas Catalog Custom Certificate

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



Iftiaj Alom August 8, 2025
Share this post
Tags