✉️ Email Signature Generator

Ad Space - Top (728×90)

📝 Signature Info

👁️ Live Preview

📦 HTML Code

Ad Space - Middle (728×90)

Email Signature Generator Guide

What is an Email Signature?

An email signature is a block of text appended to the end of an email message, typically containing the sender's name, title, company, contact information, and social links. A professional email signature enhances brand image, conveys trust, and lets recipients quickly access your contact details. This tool helps you quickly generate beautiful, highly compatible HTML email signatures.

Four Beautiful Templates

Simple: Clean layout, bold highlighted name, info on separate lines — suitable for most scenarios

Business: Left color accent bar, structured layout, prominent company name — ideal for formal corporate emails

Creative: Top color band, social links as colorful buttons — great for design/creative industries

Minimal: Plain text with separators connecting key info — ultra clean, perfect for personal emails

Color Customization

Use the theme color picker to freely adjust the accent color, or enter a hex value directly (e.g. #2563eb). Common color presets are provided below — click to apply instantly. We recommend matching the theme color to your company's brand color.

How to Use

Step 1 - Enter your info: Fill in your name (required), title, company, phone, email, website and other details in the left form. All fields sync to the preview on the right in real time — type and see results instantly. Avatar and social links are optional.

Step 2 - Choose a template: In the "Template & Style" section, click Simple, Business, Creative, or Minimal. The preview switches immediately. Different templates arrange information differently with distinct visual styles — pick one that fits your preference and brand.

Step 3 - Customize color: Click the color swatch to pick a color, or type a hex value in the text box. You can also click preset swatches for quick brand colors. Adjust font size from the dropdown.

Step 4 - Copy & use: Click "Copy HTML" to get inline-styled HTML source code to paste into your email client's signature settings; or "Copy Rich Text" to paste rendered signature content directly; or "Export HTML" to save a file locally.

Setup in Email Clients

Gmail: Settings → See all settings → Signature → "Create new" → paste HTML code or rich text → Save Changes. Select the signature from the toolbar when composing.

Outlook Web: Settings (gear) → Mail → Compose and reply → Email signature → toggle on → paste content → Save. New emails will auto-include it.

Outlook Desktop: New Email → Signature → Signatures... → New → paste content → Save. Set as default for new emails in "Select default signature".

Apple Mail: Mail → Preferences → Signatures → choose account → create signature → paste rich text content directly. Note: Apple Mail doesn't support pasting raw HTML source — use the "Copy Rich Text" button.

Thunderbird: Account Settings → select account → paste HTML into the signature text box, or attach an HTML file. Use the "Export HTML" feature for a ready-to-attach file.

Signature Design Tips

Keep it concise: Signatures shouldn't be too long — aim for 5-7 lines. Keep only the most essential contact info to avoid overload. Phone and email are must-haves; add social links as needed.

Restrained colors: Stick to 1-2 theme colors that match your company logo or brand. Avoid too many bright colors. Dark text on light background is a safe choice.

Social links in moderation: Only include 2-3 most-used platforms — too many links clutter the signature. LinkedIn is especially important for business professionals.

Test compatibility: After generating, send yourself a test email and check rendering across devices and clients. Pay special attention to Outlook, as it has limited CSS support.

Does the email signature generator upload my data?

No. This tool is a pure frontend zero-dependency app. All signature generation happens locally in your browser. Your name, email, phone and other information are never uploaded to any server, so you can use it with confidence.

Which email clients support the generated HTML signature?

The generated signature uses inline CSS styles, making it compatible with Gmail, Outlook, Apple Mail, Thunderbird, Yahoo Mail and other major email clients. Just copy the HTML code and paste it into your email client's signature settings.

How do I add the signature to Gmail?

In Gmail, go to Settings → See all settings → Signature → Create new signature, then paste the HTML code generated by this tool into the editor (Gmail will render the HTML automatically). Save and select the signature when composing emails.

How do I add the signature to Outlook?

In Outlook, go to File → Options → Mail → Signatures, create a new signature, then paste the HTML code generated by this tool into the editor. Outlook desktop also supports pasting rich text content directly in the signature editor.

Does the signature support social links?

Yes. You can fill in LinkedIn, Twitter/X, GitHub, Facebook, Instagram and other social links. The generated signature will display corresponding social link buttons that link to your profiles.

Why do email signatures need inline styles?

Because most email clients (especially Gmail and Outlook) strip out <style> tags and external CSS references from emails, keeping only inline style attributes. Therefore, email signatures must use inline CSS styles to display correctly across all email clients. This tool generates signatures with fully inline styles for maximum compatibility.

Ad Space - Bottom (728×90)
`; const blob = new Blob([full], {type:'text/html'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'email-signature.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(a.href); showToast('HTML file exported'); } // ==================== Event Binding ==================== document.querySelectorAll('input[type="text"], input[type="email"], select').forEach(el => { if (el.id && el.id.startsWith('f_')) { el.addEventListener('input', render); el.addEventListener('change', render); } }); // Init renderColorPresets(); updatePresetActive(val('f_color')); render();