A certificate is one of the few things made on the web that ends up on paper, in a frame, on someone’s wall. That changes what “done” means. Toolsyy’s Certificate Generator has thirty templates and no watermark, but the part worth explaining is the geometry — because getting a browser to emit a page that prints correctly is more awkward than it sounds, and most generators quietly do not.
A real A4 sheet, not a landscape-shaped rectangle
Plenty of certificate makers hand you a PDF whose page is whatever shape their design happened to be. It looks fine on screen. Then you print it, your printer offers to “fit to page”, and the result is a slightly shrunken certificate sitting inside an uneven white border.
The output here is a true A4 landscape page — 297 by 210 millimetres — which is what makes print at 100% honest advice rather than wishful thinking. But that creates a problem, because of how the HTML-to-PDF step behaves.
The converter does not stretch the capture to fill the page. It draws the captured image at the image’s own aspect ratio and leaves whatever is left over blank. Point it at a design shaped differently from the page and you get letterboxing — bands of dead white along two edges.
So the fix is to make the design exactly the shape of the space it lands in. Starting from the page and subtracting the margin:
A4 landscape 11.6929 x 8.2677 in (297 x 210 mm)
margin 0.4 in on every edge
printable area 10.8929 x 7.4677 in
authored at 800 x 548 px
aspect 1.4599 vs printable 1.4587The height is not a design choice, it is derived: 800 pixels multiplied by the printable aspect ratio. Change the margin and the design follows automatically, so the two cannot drift apart.
The rounding is deliberate too. That figure comes out at 548.45 and is floored, never rounded. A box a fraction shorter than the printable area leaves the artwork a sliver of headroom, which is harmless. A box a fraction taller overflows the page — and the converter’s answer to an overflow is to paginate, so you would get a second, near-empty A4 sheet behind your certificate. Rounding down is what guarantees that can never happen.
Why the preview shrinks on a phone and the PDF does not
That 800-pixel design is wider than a phone screen, so the preview is visually scaled down with a CSS transform to fit the viewport.
This is exactly where a naive implementation produces a mobile-only bug. The obvious way to measure an element reports its rendered size, which includes that shrinking transform — so the capture would run at whatever size the preview happened to be displayed at, and a certificate made on a phone would come out lower resolution than one made on a laptop. Same tool, same inputs, worse file, for no reason the user could see.
Reading the element’s layout dimensions instead sidesteps it, because layout size ignores transforms and always reports the true authored box. The scaling stays purely cosmetic and the PDF is byte-for-byte the same wherever it was made.
The PDF is a screenshot, and that has consequences
The certificate is not drawn with PDF primitives. The live preview is rendered to a canvas and that image is placed on the page. This keeps the design and the output guaranteed identical — what you see really is what you get — but it means the capture step inherits every quirk of rendering a web page into a bitmap. Three of those were worth engineering around.
Resolution
The capture runs at three times scale, so 800 CSS pixels become 2,400 across a printed width of 10.89 inches — about 220 DPI. That is comfortably into “looks like print” territory rather than “looks like a screenshot”. It is also why the design is authored at 800 pixels rather than 600: the same capture at 600 would land at 165 DPI, and the narrower content column made long names and headings wrap onto a second line.
Fonts
A web font that has not finished loading when the capture runs is simply not in the picture — the canvas records whatever fallback was on screen at that instant. The generator waits for the browser to confirm fonts are ready before capturing, which is the difference between a certificate set in its intended typeface and one set in Times New Roman.
Gradients and shadows that vanish
Modern CSS frameworks implement gradients and shadows through CSS custom properties. The canvas renderer frequently cannot resolve those, and the failure mode is silent: the PDF comes back with the backgrounds, borders and shadows simply missing, leaving flat white where the design had colour. Every colour, gradient and shadow on these templates is therefore written as a literal inline value rather than a utility class — less tidy as code, and the only version that survives the capture.
The bug where all the text sat half a line too low
This one is worth telling in full, because it is a genuinely good example of two reasonable decisions colliding.
To place text, the canvas renderer needs to know where a font’s baseline sits. It works this out empirically: it appends a hidden probe to the page — a sample of text followed by a 1×1 image marked to align with the baseline — and measures the vertical gap between them.
That measurement is only meaningful while the probe image is
inline. And the CSS reset shipped by most frameworks sets
img { display: block }, which drops that probe image
onto its own line. The measured gap therefore came back far too large — 47
pixels instead of 32 at 34-pixel type.
The renderer paints every run of text at the top of its box plus that baseline, so all of the text landed about half a line low. Meanwhile the rules, frames and the seal are drawn from box geometry rather than font metrics, so they stayed exactly where they belonged. The result was a certificate whose heading struck through its own underline, with the date and signature labels sinking into the bottom border.
The fix is to correct the measurement at its source: restore inline display for the probe image alone, for the duration of the capture, and remove the rule afterwards. The selector matches the 1×1 image the renderer builds — identifiable because its width and height are set as HTML attributes, which nothing else on the page does.
It is a strange three lines of code to find in a certificate generator, and without them the type sits visibly wrong on every single template.
The date, and a timezone trap
A date input hands back a plain calendar string like
2026-08-30. Feed that to a browser’s date handling and it is
interpreted as midnight UTC, then displayed in the viewer’s own
timezone — so anyone west of Greenwich sees the previous day. A certificate
dated 29 August when you picked the 30th is the kind of error that is
embarrassing after it has been printed and handed out.
The date is therefore both parsed and formatted explicitly in UTC, so the day shown is the day you chose, everywhere. It is also rendered as “30 August 2026” rather than an ISO string, because that is how a date reads on something intended to be framed.
Printing it well
- Print at 100%, not fit to page. The document is already exactly A4; anything else adds a redundant scaling pass.
- Use heavier paper. 160–250gsm is where a certificate stops feeling like a memo. It matters more to the impression than any design choice on the page.
- Check the printer’s own margins. The 0.4 inch margin built into the file clears the non-printable edge on essentially all consumer printers, but borderless mode can still interfere — leave it off.
- Print one before printing forty. Names are the thing that goes wrong, and a proof copy costs one sheet.
Everything runs in the browser: no upload, no account, no watermark, and no cap on how many you make. The names of the people you are certifying never leave your machine, which for an employee or student list is not a small detail.
FAQ
What size is the PDF, and how should I print it?
It is a genuine A4 landscape page, 297 by 210 millimetres, with the artwork placed inside a 0.4 inch margin on every edge. Print it at 100 percent scale rather than choosing fit to page. Fit to page adds a second scaling step on top of a document that is already the right size, which shrinks the design slightly and leaves an uneven border.
Why does the preview look smaller on my phone than the PDF I get?
The certificate is laid out at a fixed size so that the result is identical on every device, and on a narrow screen that layout is wider than the display, so it is visually scaled down to fit. That scaling is presentation only. The capture reads the true authored dimensions rather than the displayed ones, so a certificate made on a phone is the same file as one made on a desktop.
Is the PDF watermarked, and do I need an account?
Neither. There is no watermark, no signup, no email capture and no export limit, and the file is not stamped with any branding. The certificate is built and saved entirely in your browser, so there is no server involved that would need an account to meter anything in the first place.
Can I edit the certificate after downloading it?
Not in the PDF itself, because the design is captured as artwork rather than as live text fields. The practical approach is to come back to the tool, since your details are remembered in the browser, change what you need and download again. That is usually faster than editing a PDF, and it keeps the layout intact.
Why does the first download take a moment?
The library that turns the page into a PDF is around 638 kilobytes, and it is deliberately not loaded until you actually ask for a certificate. Every other page on the site would otherwise pay for it. The first download fetches it and later ones are immediate.
Related guides
- Turning images into a PDF — page sizing and fit, from the other direction.
- What merging PDFs keeps and drops — for binding a batch of certificates into one file to send to a printer.
- How image compression works — if you are adding a logo and it is larger than it needs to be.
Try it now: Free Certificate Generator