HTML → PDF TOOL
Free HTML to PDF converter for everyday use
This tool helps you turn regular HTML into clean, shareable PDF files — perfect for design templates, invoices, newsletters, documentation, resumes, or any page you want to save or print.
HTML to PDF Converter
How this converter works
You can use the converter in two simple ways:
- Upload file – select a
.htmlfile directly from your device. - Paste HTML – copy and paste your HTML code into the editor box.
The live counter in the header shows how many HTML → PDF conversions have been created using this tool so far. No sign-ups, no paywalls — just a fast, minimal utility built with love.
Tip: For best results, use well-structured HTML (with proper headings, paragraphs, and basic CSS) so your exported PDF looks neat on both screen and paper.
Practical guide
Common use cases
- Export an HTML invoice/receipt into a printable PDF
- Convert a newsletter/email template into a shareable PDF
- Save documentation, reports, or simple web layouts for offline access
- Create a PDF version of a resume or one-pager designed in HTML/CSS
Best-results checklist
- Prefer a clean, single-column layout (PDF page widths are fixed)
- Use semantic tags like
h1,h2,p, andulfor consistent spacing - Avoid very large fixed widths (e.g.,
width: 1400px) unless you’re designing for print - If you rely on external fonts, include fallbacks (renderers may differ)
Better example (paste mode)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Invoice – Codes of Hex Example</title>
<style>
:root{
--text:#111827;
--muted:#6b7280;
--line:#e5e7eb;
--bg:#ffffff;
--soft:#f9fafb;
--accent:#2563eb;
}
* { box-sizing: border-box; }
body{
margin:0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--text);
background: var(--bg);
}
.page{
max-width: 820px;
margin: 0 auto;
padding: 44px 42px;
}
.top{
display:flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.brand{
font-size: 18px;
font-weight: 700;
letter-spacing: .02em;
margin: 0;
}
.brand-sub{
margin: 6px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.tag{
display:inline-block;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12px;
color: var(--muted);
background: var(--soft);
margin-top: 10px;
}
.invoice-title{
margin: 0;
font-size: 28px;
letter-spacing: .01em;
}
.meta{
margin-top: 8px;
font-size: 13px;
color: var(--muted);
line-height: 1.7;
text-align: right;
}
.grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 22px;
}
.card{
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 14px;
background: #fff;
}
.card h3{
margin: 0 0 8px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--muted);
font-weight: 700;
}
.card p{
margin: 0;
font-size: 14px;
line-height: 1.7;
}
table{
width:100%;
border-collapse: collapse;
margin-top: 18px;
font-size: 14px;
}
th, td{
padding: 12px 10px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
th{
text-align:left;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
background: var(--soft);
border-top: 1px solid var(--line);
}
td:nth-child(2), td:nth-child(3), th:nth-child(2), th:nth-child(3){
text-align: right;
white-space: nowrap;
}
.desc{
color: var(--muted);
font-size: 13px;
margin-top: 4px;
line-height: 1.6;
}
.footer{
margin-top: 26px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 12px;
color: var(--muted);
display:flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="page">
<div class="top">
<div>
<p class="brand">Nova Studio</p>
<p class="brand-sub">
22B Park Avenue, Bengaluru, India<br/>
support@novastudio.example · +91 90000 00000
</p>
<span class="tag">Tax Invoice</span>
</div>
<div style="text-align:right;">
<h1 class="invoice-title">Invoice</h1>
<div class="meta">
Invoice No: <strong>NS-2026-0142</strong><br/>
Date: <strong>20 Jan 2026</strong><br/>
Due: <strong>27 Jan 2026</strong>
</div>
</div>
</div>
<div class="footer">
<span>Thank you for your business.</span>
<span>Nova Studio · novastudio.example</span>
</div>
</div>
</body>
</html>
Tip: Keep CSS simple, avoid extreme widths, and your PDF will look consistent.
Troubleshooting & FAQ
My PDF cuts off content on the right. What should I do?
This usually happens when the HTML layout is wider than a PDF page. Reduce fixed-width containers,
avoid very wide tables, and prefer responsive widths (like percentages) for print-friendly output.
Why do fonts look different in the PDF?
PDF renderers may not load every external font the same way. Use font fallbacks (for example:
font-family: Inter, Arial, sans-serif;) and keep typography simple for consistent results.
Can I convert a full website with multiple pages?
This tool is designed for single HTML inputs (one file or one pasted document). For multi-page sites,
export the specific page you need, or combine content into a single HTML file first.
Is my HTML stored anywhere?
Your HTML is sent only to generate the PDF output. Codes of Hex is designed for temporary processing,
not for long-term storage. For details, see the Privacy Policy.
What kind of HTML works best?
Clean HTML with basic CSS is ideal: headings, paragraphs, lists, simple spacing, and standard images.
Complex JS-heavy pages may not render exactly as they do in a live browser.
Privacy & safe usage
- Avoid pasting secrets (passwords, private keys, OTPs) into any online tool.
- For sensitive documents, remove unnecessary personal data before converting.
- Read the Privacy Policy for the official details of how requests are handled.
