Will this signature work in Outlook and Gmail?

Yes, the tool generates a table-based layout with inline CSS styles specifically designed to render consistently in Gmail, Outlook, and Apple Mail.

How do the social media icons work?

The builder automatically detects platforms like LinkedIn, X, GitHub, and YouTube from your pasted links and embeds them as email-safe inline-SVG data URIs.

What does the Auto theme option do?

The Auto theme injects a media query block for dark mode preferences, allowing clients like Apple Mail to automatically adjust the signature colors.

Do I need to upload my logo or photo to this tool?

No, you must host your photo or logo publicly and paste the image URL into the builder so email clients can load it.

Is my personal data sent to a server?

No, the signature generation runs entirely locally in your web browser, ensuring your contact details remain private.

Email Signature HTML Builder

Examples

1. Corporate Side-by-Side Signature

Product Manager

Background

A product manager at Acme Inc. wants to update her email signature to include her headshot, company branding, and social links.

Problem

Standard email signatures often break layout alignment or block external social icon images in Outlook.

How to use

Input 'Jane Doe' as the full name, add job details, paste a public avatar URL, select the 'Side-by-side' layout, and add LinkedIn and X links.

{
  "fullName": "Jane Doe",
  "jobTitle": "Product Manager",
  "company": "Acme Inc.",
  "layout": "side",
  "accent": "#2563eb",
  "socials": "linkedin.com/in/janedoe\nx.com/janedoe"
}

Outcome

A clean table-based HTML signature with a left-aligned photo, blue accent divider, and inline-SVG social icons that load reliably.

2. Minimalist Developer Signature

Staff Engineer

Background

A developer wants a clean, text-only signature that matches dark mode email clients without using heavy image assets.

Problem

Bright white signature backgrounds look jarring to recipients using dark mode email clients.

How to use

Input contact details, select the 'Stacked' layout, choose the 'Dark' theme, set a green accent color, and add a GitHub link.

{
  "fullName": "Alex Chen",
  "jobTitle": "Staff Engineer",
  "company": "Nullcorp",
  "layout": "stacked",
  "theme": "dark",
  "accent": "#10b981",
  "socials": "github.com/alexchen"
}

Email Signature HTML Builder | Elysia Tools

Email Signature HTML Builder

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Corporate Side-by-Side Signature

2. Minimalist Developer Signature

FAQ

HTML with Images Samples

Text with Sensitive Data Samples

Contentful Cloud-based CMS Samples

Cypress E2E Testing Framework

Image Palette to Design Tokens

HTML Tag Stripper (HTML标签清除)

QR Code Generator

Accessibility Heatmap Generator

HTML Extraction, Cleanup, and Markdown/PDF Export Tools

Barcode, QR Code, and Label Tools

Web Accessibility Audit and Accessible Color Tools

Audio Encoding and Format Conversion Tools