Email Signature Generator

Create a professional HTML email signature in 60 seconds — free, no signup

Your Information

Template
Contact Details
0/40
0/50
0/60
Social Links
Optional CTA Banner
Style

Paste into Gmail

  1. Open Gmail → click the gear ⚙️ icon (top right)
  2. Click "See all settings"
  3. Go to the General tab
  4. Scroll to Signature → click "Create new" or edit existing
  5. Click inside the signature text area → Paste (Ctrl+V / Cmd+V)
  6. Scroll down → click "Save Changes"

Paste into Outlook (Desktop)

  1. Open Outlook → File → Options → Mail
  2. Click "Signatures…"
  3. Click "New", give it a name
  4. Click in the signature editing area → Paste (Ctrl+V)
  5. Click "OK" to save

Outlook on the Web

  1. Settings gear → "View all Outlook settings"
  2. Mail → Compose and reply
  3. Click in Email signature box → Paste
  4. Click Save

Live Preview

Gmail Desktop

Saved Signatures

How to Add Your Signature to Gmail, Outlook, and Apple Mail

📧 Gmail

  1. Click "Copy for Gmail" above
  2. Open Gmail → gear ⚙️ → "See all settings"
  3. General tab → Signature section
  4. Create new signature → paste
  5. Save Changes

🖥️ Outlook Desktop

  1. Click "Copy for Outlook" above
  2. File → Options → Mail
  3. Click "Signatures…" → New
  4. Click in editor → Paste (Ctrl+V)
  5. Click OK to save

🌐 Outlook Web

  1. Copy for Outlook
  2. Settings gear → "View all settings"
  3. Mail → Compose and reply
  4. Paste in Email signature box
  5. Click Save

🍎 Apple Mail

  1. Copy HTML (Copy HTML button)
  2. Mail → Settings → Signatures
  3. Select account → click +
  4. Uncheck "Always match default font"
  5. Paste — use Classic or Minimal template

Note: Email client rendering varies. All templates use table-based, inline-styled HTML for maximum compatibility. Minor font fallback differences may occur in Outlook due to its Word-based HTML renderer.

Professional Email Signature Best Practices

  • Include only what's essential. Name, title, company, and one contact method is the minimum. Phone, website, and one or two social links are additions — not requirements. Every extra field adds noise for the reader.
  • Use email-safe fonts. Google Fonts and custom web fonts break in most email clients because they block external resources. The fonts in this generator (Arial, Georgia, Verdana, Trebuchet MS, Courier) are pre-installed on virtually every device.
  • Avoid images unless necessary. Many corporate email servers block images by default. If you need a logo, use one that complements your signature even when invisible — or ensure your text-only version still looks professional. This generator is intentionally image-free for maximum reliability.
  • Keep it short. A signature taller than ~100px in the composed message starts to feel like a footer from a 2010 corporate IT department. Compact and Modern templates are good choices if you have fewer than 5 fields.
  • Test before you commit. Send a test email to yourself on Gmail, Outlook, and your phone. The preview in this tool approximates common rendering, but actual client behavior is the ground truth.

Frequently Asked Questions

Click "Copy for Gmail", then in Gmail: Settings (gear icon) → See all settings → General tab → Signature section → Create new or edit existing → Click in the signature text box → Paste (Ctrl+V / Cmd+V). The rich HTML formatting will be preserved.
Click "Copy for Outlook", then: File → Options → Mail → Signatures → New or Edit → Click in the signature editor → Paste (Ctrl+V). For Outlook web: Settings gear → View all Outlook settings → Compose and reply → Email signature → Paste.
In Apple Mail: Mail menu → Settings → Signatures → select your account → click + → uncheck "Always match my default message font" → Paste the copied HTML. Note: Apple Mail sometimes strips complex HTML; use the Classic or Minimal template for best results.
All templates use table-based, inline-styled HTML — the approach used by major ESPs for maximum compatibility. They render reliably in Gmail, Outlook 2019/365, Apple Mail, and mobile clients. Minor font fallback differences may occur in Outlook due to its Word-based renderer.
No. Everything you type and all generated HTML stays entirely in your browser. Nothing is sent to any server. Your signature draft is saved in your browser's localStorage for convenience.
Yes. Click "Save Signature" to store your current signature (up to 5 saved signatures). Reload any saved signature with one click — useful for managing different roles or clients.
`; const blob = new Blob([html], { type: 'text/html' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'email-signature.html'; a.click(); URL.revokeObjectURL(a.href); showToast('Downloaded email-signature.html'); } function copyText(text, msg) { if (navigator.clipboard) { navigator.clipboard.writeText(text).then(() => showToast(msg)).catch(() => { const ta = document.createElement('textarea'); ta.value = text; ta.style.position='fixed'; ta.style.left='-9999px'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showToast(msg); }); } else { const ta = document.createElement('textarea'); ta.value = text; ta.style.position='fixed'; ta.style.left='-9999px'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showToast(msg); } } // =========================================================== // SAVE / LOAD // =========================================================== function saveDraft(d) { try { localStorage.setItem('sig_draft', JSON.stringify({...d, template: currentTemplate, accent: accentColor})); } catch(e) {} } function loadDraft() { try { const draft = JSON.parse(localStorage.getItem('sig_draft') || 'null'); if (!draft) return; const fields = ['f-name','f-title','f-company','f-phone','f-email','f-website','f-linkedin','f-twitter','f-github','f-cta-text','f-cta-url']; const keys = ['name','title','company','phone','email','website','linkedin','twitter','github','ctaText','ctaUrl']; fields.forEach((fid, i) => { const el = document.getElementById(fid); if (el && draft[keys[i]]) el.value = draft[keys[i]]; }); if (draft.template) currentTemplate = draft.template; if (draft.accent) { accentColor = draft.accent; document.getElementById('custom-color').value = draft.accent; } // Activate the right template button document.querySelectorAll('.tpl-btn').forEach(b => b.classList.remove('active')); const tplBtns = document.querySelectorAll('.tpl-btn'); const tplNames = ['classic','modern','minimal','compact']; const idx = tplNames.indexOf(currentTemplate); if (idx >= 0 && tplBtns[idx]) tplBtns[idx].classList.add('active'); } catch(e) {} } function saveSignature(name) { try { savedSignatures = JSON.parse(localStorage.getItem('saved_signatures') || '[]'); } catch(e) { savedSignatures = []; } const d = getFormData(); const entry = { id: Date.now(), name, data: d, template: currentTemplate, accent: accentColor, date: new Date().toLocaleDateString() }; savedSignatures.unshift(entry); if (savedSignatures.length > 5) savedSignatures = savedSignatures.slice(0, 5); try { localStorage.setItem('saved_signatures', JSON.stringify(savedSignatures)); } catch(e) {} renderSavedList(); showToast('Signature saved!'); // Show saved list document.getElementById('saved-list-wrapper').style.display = 'block'; document.getElementById('saved-toggle').textContent = 'Hide'; } function loadSavedSignatures() { try { savedSignatures = JSON.parse(localStorage.getItem('saved_signatures') || '[]'); } catch(e) { savedSignatures = []; } renderSavedList(); } function renderSavedList() { const list = document.getElementById('saved-list'); if (!savedSignatures.length) { list.innerHTML = '

No saved signatures yet.

'; return; } list.innerHTML = savedSignatures.map((s, i) => `
${esc(s.name)} ${s.date}
`).join(''); } function loadSaved(idx) { const s = savedSignatures[idx]; if (!s) return; const fieldMap = { 'f-name':'name','f-title':'title','f-company':'company','f-phone':'phone', 'f-email':'email','f-website':'website','f-linkedin':'linkedin','f-twitter':'twitter', 'f-github':'github','f-cta-text':'ctaText','f-cta-url':'ctaUrl' }; Object.entries(fieldMap).forEach(([fid, key]) => { const el = document.getElementById(fid); if (el) el.value = s.data[key] || ''; }); currentTemplate = s.template || 'classic'; accentColor = s.accent || '#b45309'; document.getElementById('custom-color').value = accentColor; document.querySelectorAll('.tpl-btn').forEach(b => b.classList.remove('active')); const tplNames = ['classic','modern','minimal','compact']; const idx2 = tplNames.indexOf(currentTemplate); if (idx2 >= 0) document.querySelectorAll('.tpl-btn')[idx2]?.classList.add('active'); updatePreview(); showToast('Signature loaded!'); } function deleteSaved(idx) { savedSignatures.splice(idx, 1); try { localStorage.setItem('saved_signatures', JSON.stringify(savedSignatures)); } catch(e) {} renderSavedList(); } function toggleSavedPanel() { const wrapper = document.getElementById('saved-list-wrapper'); const btn = document.getElementById('saved-toggle'); const isHidden = wrapper.style.display === 'none'; wrapper.style.display = isHidden ? 'block' : 'none'; btn.textContent = isHidden ? 'Hide' : 'Show'; } function doResetForm() { document.querySelectorAll('.form-panel input').forEach(el => el.value = ''); currentTemplate = 'classic'; accentColor = '#b45309'; document.querySelectorAll('.tpl-btn').forEach((b,i) => b.classList.toggle('active', i===0)); document.getElementById('custom-color').value = '#b45309'; document.querySelectorAll('.color-swatch').forEach((s,i) => s.classList.toggle('active', i===0)); updatePreview(); } // =========================================================== // FAQ // =========================================================== function toggleFaq(btn) { const item = btn.closest('.faq-item'); const open = item.classList.toggle('open'); btn.setAttribute('aria-expanded', open); } // =========================================================== // TOAST // =========================================================== function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2500); } // =========================================================== // INLINE DIALOG HELPERS // =========================================================== function openDlg(id){ document.getElementById(id).classList.add('open'); } function closeDlg(id){ document.getElementById(id).classList.remove('open'); } // =========================================================== // INIT // =========================================================== function init() { document.getElementById('yr').textContent = new Date().getFullYear(); loadDraft(); loadSavedSignatures(); // Prefill sample data if form is empty if (!document.getElementById('f-name').value) { document.getElementById('f-name').value = 'Jane Smith'; document.getElementById('f-title').value = 'Senior Product Designer'; document.getElementById('f-company').value = 'Acme Corp'; document.getElementById('f-email').value = '[email protected]'; document.getElementById('f-website').value = 'https://acme.com'; } updatePreview(); // --- Save signature inline dialog --- document.getElementById('saveSignatureBtn').addEventListener('click', () => { closeDlg('dlgReset'); document.getElementById('dlgSaveInput').value = ''; openDlg('dlgSave'); document.getElementById('dlgSaveInput').focus(); }); document.getElementById('dlgSaveOk').addEventListener('click', () => { const v = document.getElementById('dlgSaveInput').value.trim(); if (!v) { document.getElementById('dlgSaveInput').focus(); return; } closeDlg('dlgSave'); saveSignature(v); document.getElementById('saveSignatureBtn').focus(); }); document.getElementById('dlgSaveInput').addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); document.getElementById('dlgSaveOk').click(); } if (e.key === 'Escape') { closeDlg('dlgSave'); document.getElementById('saveSignatureBtn').focus(); } }); document.getElementById('dlgSaveCancel').addEventListener('click', () => { closeDlg('dlgSave'); document.getElementById('saveSignatureBtn').focus(); }); // --- Reset inline confirm dialog --- document.getElementById('resetFormBtn').addEventListener('click', () => { closeDlg('dlgSave'); openDlg('dlgReset'); document.getElementById('dlgResetOk').focus(); }); document.getElementById('dlgResetOk').addEventListener('click', () => { closeDlg('dlgReset'); doResetForm(); document.getElementById('resetFormBtn').focus(); }); document.getElementById('dlgResetCancel').addEventListener('click', () => { closeDlg('dlgReset'); document.getElementById('resetFormBtn').focus(); }); document.getElementById('dlgReset').addEventListener('keydown', e => { if (e.key === 'Escape') { closeDlg('dlgReset'); document.getElementById('resetFormBtn').focus(); } }); } init();