Free tool

A signature that actually renders.

Build a professional HTML email signature in seconds, or paste your own code to preview it. Test across desktop, mobile, and dark mode email clients.

Private by design. No cookies, and the tool runs entirely in your browser, nothing you type leaves your device. The visit itself is counted by our own privacy-first analytics, described in our privacy policy.

#0E7490
New Message
To: sarah.chen@example.com
Subject: Re: Project proposal

Hi Sarah,

Thanks for getting in touch. I've had a look at the requirements and I think we can definitely help. Let me put together a quick proposal and send it through by end of day.

Cheers,

Re: Project proposal
joel.richardson@devalo.com.au

Hi Sarah,

Thanks for getting in touch. Let me put together a proposal.

Cheers,

How it works

01

Fill in your details

Name, title, company, contact info. Add your ABN or licence number if you need them.

02

Choose a template

Six Outlook-compatible templates. Tune colours, fonts, and social links to match your brand.

03

Copy and install

Preview across desktop, mobile, and dark mode. Copy the HTML and paste into your email client.

Best practices

Outlook compatible

Table-based layouts, inline styles. Outlook's Word engine ignores flexbox, grid, and border-radius.

Mobile friendly

Under 400px wide. Minimum 13px font to stop iOS auto-scaling. No multi-column layouts.

Keep it lean

Under 5,000 characters for Exchange. Two or three colours max. Externally hosted images only.

Test before you send

Send yourself a draft from Gmail, Outlook, and your phone. Catches rendering surprises early.

By industry

Click any example to load it into the builder, then customise with your details.

Want a QR code in your signature? Generate one free and link it to your website, booking page, or contact card.

Common questions.

Yes. The built-in signature builder lets you enter your name, title, company, and contact details, then choose from professional templates. The tool generates Outlook-compatible HTML automatically. No coding required.

Switch to the HTML Code tab and paste your email signature code into the editor. The live preview instantly shows how it renders across desktop, mobile, and dark mode views, exactly as it would appear in an email client.

Outlook uses Microsoft Word as its rendering engine, which does not support modern CSS like flexbox, grid, or border-radius. All templates generated by the builder use table-based layouts with inline styles for maximum Outlook compatibility.

Keep your email signature under 5,000 characters for Microsoft Exchange compatibility. Signatures over this limit may be truncated or stripped entirely. The preview tool shows a character count and warns you if you exceed this threshold.

Keep your signature under 400px wide, use a minimum font size of 13px to prevent iOS auto-scaling, and avoid multi-column layouts that break on narrow screens. Use the mobile preview tab to test how your signature renders on a phone.

If you use images, host them externally on a reliable server and reference them with full URLs. Never use base64-encoded images in email signatures as they dramatically increase the signature size and may be blocked by email clients. Always include alt text for accessibility.

Install your signature.

Copy the HTML above, then follow the steps for your email client.

  1. Open Gmail and click the gear icon (top right), then See all settings.
  2. Scroll down to the Signature section on the General tab.
  3. Click Create new and name your signature.
  4. In the signature editor, click the code icon (</>) or press Ctrl+Shift+8 to switch to HTML mode. If there's no code icon, compose a new email, paste the HTML signature there, select it all, copy it, then paste it into the signature editor.
  5. Paste your copied HTML signature.
  6. Scroll to the bottom and click Save Changes.

Tip: Gmail strips some CSS. Table-based signatures (like the ones this tool generates) work best.

  1. Open File > Options > Mail > Signatures.
  2. Click New, name your signature, and click OK.
  3. Open the signature HTML file in a browser: save your HTML as a .htm file, open it in Chrome/Edge, select all (Ctrl+A), and copy (Ctrl+C).
  4. In the Outlook signature editor, paste (Ctrl+V) the rendered signature.
  5. Set it as default for new messages and/or replies, then click OK.

Tip: Outlook uses Word for rendering. Avoid CSS flexbox, grid, or border-radius. Use table layouts (already handled by this tool).

  1. Click the gear icon (top right) and select View all Outlook settings.
  2. Go to Mail > Compose and reply.
  3. Under Email signature, click in the editor box.
  4. Open your HTML in a browser, select all and copy, then paste into the signature editor. Alternatively, use the Insert as HTML option if available.
  5. Set defaults for new messages and replies, then click Save.
  1. Open Mail > Settings > Signatures (or Preferences on older macOS).
  2. Click + to create a new signature. Give it a name.
  3. Save your HTML as a .htm file and open it in Safari.
  4. Select all (Cmd+A) and copy (Cmd+C).
  5. Click on the signature preview area in Mail Settings and paste (Cmd+V).
  6. Uncheck "Always match my default message font" to preserve your formatting.
  7. Assign it to the correct email account.

Tip: Apple Mail has excellent HTML rendering. Your signature should look exactly as previewed.

  1. Click the gear icon, then More Settings.
  2. Go to Writing email (or Mailboxes depending on version).
  3. Under Signature, toggle it on.
  4. Open your HTML file in a browser, select all, copy, then paste into the signature text area.
  5. Click Save (or it saves automatically).

Note: Yahoo may strip some formatting. Simple, table-based signatures work best.

A signature is one detail. Websites are the day job.

Devalo is a web design studio in Melbourne, building fast, accessible websites for businesses across Australia. Tools like this one stay free either way.

Get a quote See what a build includes