4×6 shipping label HTML template

A 4×6 inch shipping label in HTML with sender, recipient, service bar and barcode area. Print it on thermal label printers.

Convert this to PDF → Download .html

Paper: 4 × 6 in · 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=@shipping-label.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o shipping-label.pdf

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

Tips

The page is exactly 4×6 in with @page { size: 4in 6in; margin: 0 }. Send "prefer_css_page_size": true.
Swap the placeholder barcode for a real one (JsBarcode or your carrier's API).
Print at actual size, with the printer media set to 4×6. More: shipping label guide.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shipping label 4x6</title>
<style>
  @page { size: 4in 6in; margin: 0; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { margin: 0; width: 4in; height: 6in; }
  body { font-family: Helvetica, Arial, sans-serif; color: #000; font-size: 11px; }
  .label { width: 4in; height: 6in; padding: .18in; display: flex; flex-direction: column; gap: .1in; }
  .row { border: 2px solid #000; padding: .1in; }
  .from { font-size: 9px; line-height: 1.35; }
  .to { font-size: 15px; line-height: 1.35; flex: 1; }
  .to b { font-size: 18px; }
  .service { display: flex; justify-content: space-between; align-items: center; background: #000; color: #fff; padding: .08in .12in; font-weight: 700; font-size: 16px; letter-spacing: .04em; }
  .barcode { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .barcode svg { width: 100%; height: .9in; }
  .track { font-family: "Courier New", monospace; font-size: 13px; letter-spacing: .12em; }
  @media screen { html { background: #e9e9e7; width: auto; height: auto; } body { margin: 24px auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); } }
</style>
</head>
<body>
  <div class="label">
    <div class="row from"><b>FROM</b><br>Your Shop S.L.<br>Carrer de Example 1, 08001 Barcelona, ES</div>
    <div class="row to"><b>SHIP TO</b><br><b>Jordan Example</b><br>Carrer de Mallorca 401<br>08013 Barcelona<br>SPAIN</div>
    <div class="service"><span>STANDARD</span><span>1 / 1 · 0.8 kg</span></div>
    <div class="row barcode">
      <!-- Replace with a real barcode SVG (e.g. JsBarcode or your carrier's API) -->
      <svg viewBox="0 0 220 60" preserveAspectRatio="none" aria-label="Barcode placeholder">
        <g fill="#000">
          <rect x="0" width="3" height="60"/><rect x="5" width="1" height="60"/><rect x="8" width="2" height="60"/><rect x="13" width="4" height="60"/><rect x="19" width="1" height="60"/><rect x="22" width="3" height="60"/><rect x="27" width="2" height="60"/><rect x="31" width="1" height="60"/><rect x="34" width="4" height="60"/><rect x="40" width="2" height="60"/><rect x="44" width="1" height="60"/><rect x="47" width="3" height="60"/><rect x="52" width="2" height="60"/><rect x="56" width="1" height="60"/><rect x="59" width="4" height="60"/><rect x="65" width="1" height="60"/><rect x="68" width="3" height="60"/><rect x="73" width="2" height="60"/><rect x="77" width="1" height="60"/><rect x="80" width="3" height="60"/><rect x="85" width="2" height="60"/><rect x="89" width="4" height="60"/><rect x="95" width="1" height="60"/><rect x="98" width="2" height="60"/><rect x="102" width="3" height="60"/><rect x="107" width="1" height="60"/><rect x="110" width="4" height="60"/><rect x="116" width="2" height="60"/><rect x="120" width="1" height="60"/><rect x="123" width="3" height="60"/><rect x="128" width="2" height="60"/><rect x="132" width="1" height="60"/><rect x="135" width="4" height="60"/><rect x="141" width="2" height="60"/><rect x="145" width="1" height="60"/><rect x="148" width="3" height="60"/><rect x="153" width="2" height="60"/><rect x="157" width="4" height="60"/><rect x="163" width="1" height="60"/><rect x="166" width="3" height="60"/><rect x="171" width="2" height="60"/><rect x="175" width="1" height="60"/><rect x="178" width="4" height="60"/><rect x="184" width="2" height="60"/><rect x="188" width="1" height="60"/><rect x="191" width="3" height="60"/><rect x="196" width="2" height="60"/><rect x="200" width="1" height="60"/><rect x="203" width="4" height="60"/><rect x="209" width="2" height="60"/><rect x="213" width="1" height="60"/><rect x="216" width="4" height="60"/>
        </g>
      </svg>
      <div class="track">1Z 999 AA1 01 2345 6784</div>
    </div>
  </div>
</body>
</html>

More templates

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