Elysia Tools

Browse tools, examples, visual explainers, and topic guides from one clear workspace.

Top Categories

Hubs

Language
ZHESPTRUFRDEEN

Elysia Tools

Navigation

Design

Email Signature HTML Builder

· Last updated：2026-06-24

Generate a clean, copy-paste HTML email signature that renders correctly in Gmail, Outlook, and Apple Mail — with avatar/logo, social icons (auto-detected from your links), accent color, light/dark/auto theme, and a table-based email-safe layout using inline styles. Copy the raw HTML and paste straight into your mail client.

Details

What this tool helps you do

Build a professional email signature that actually works across clients:

  1. Fill in your details — name, job title, company, email, phone, website, address, and a public photo/logo URL.
  2. Pick a layout — side-by-side (photo left, with an accent divider) or stacked (text only).
  3. Style it — accent color, web-safe font, and Light/Dark/Auto theme (Auto injects a prefers-color-scheme block Apple Mail honors).
  4. Add socials — paste LinkedIn/X/GitHub/Instagram/Facebook/YouTube links; icons render as email-safe inline-SVG data URIs.
  5. Copy the HTML — self-contained table-based signature with inlined styles, ready to paste into Gmail / Outlook / Apple Mail.

Everything runs locally.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Samples

Examples that match this tool

Related

Continue with connected tools and hubs

Written by the Elysia Tools team
Color214
HTML/CSS86
Raw49
CSS48
Logo13

Tool usage guide

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

Key facts

Category
Design
Input types
text, textarea, color, select
Output type
html
Sample coverage
4
API ready
Yes

Overview

The Email Signature HTML Builder allows you to generate a clean, professional, and client-compatible HTML email signature using a table-based layout and inline CSS. By inputting your contact details, social media links, and custom branding options like accent colors and layout styles, you can instantly output self-contained HTML code that renders correctly across major mail clients including Gmail, Outlook, and Apple Mail.

When to use

  • When you need a professional email signature that maintains its layout and styling across different email clients like Gmail, Outlook, and Apple Mail.
  • When you want to include social media icons that automatically detect platforms from your links and render safely as inline-SVG data URIs.
  • When you need to support dark mode preferences using an automated theme setting that injects responsive color schemes for compatible mail clients.

How it works

  1. 1Enter your personal details, contact information, and a public URL for your avatar or company logo.
  2. 2Select your preferred layout style, choose a web-safe font family, set an accent color, and paste your social media links.
  3. 3Choose a theme setting—light, dark, or auto—to control how the signature adapts to dark mode environments.
  4. 4Copy the generated table-based HTML code and paste it directly into your email client's signature settings.

Use cases

  • Creating a unified, branded email signature for corporate communication with a side-by-side photo layout and company accent colors.
  • Generating a minimal, text-only stacked signature in dark mode for software engineers highlighting their GitHub and LinkedIn profiles.
  • Building a responsive email footer for freelancers that includes direct links to portfolio websites and active social media channels.

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

FAQ

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.

Home
Tools3201
Samples593
Visualizations465
Viewers103
Hubs233
Tags333
Images, Audio & Video657

Image, audio, and video processing, conversion, and optimization tools

Math, Date & Finance644

Calculators, numerics, date logic, statistics, and finance tools

Design & Color297

Color, layout, graphics, visual styling, and design helper tools

Text & Writing209

Writing, cleanup, formatting, extraction, and text analysis tools

Developer & Web193

Developer utilities, networking, web debugging, and automation helpers

Conversion & Encoding175

Format, file, archive, unit, and encoding conversion tools

FLAC/WAV Source Screening and Evidence Handoff
Self-Hosted Giveaway Widget Review and Embed Handoff
Stripe Promo Code Batch Review and Import Preflight
Batch Photo Culling Review and Editing Shortlist Handoff
UI Screenshot Structure Review and Development Handoff

© 2026 Elysia Tools. All rights reserved.

DocsPricingAboutTerms of ServicePrivacy PolicyCookiesContact
Development

HTML Viewer Samples

Sample HTML files (semantic page, form, landing page) for the in-browser HTML Viewer

Text Processing

HTML with Images Samples

HTML source code samples with images for testing extraction

Media

MSG Viewer Samples

An Outlook MSG email sample for in-browser preview

Text Processing

Text with Sensitive Data Samples

Text containing various types of sensitive data for testing data masking (phones, emails, ID cards, bank cards)

Format Conversion

AsciiMath LaTeX MathML Equation Converter

Convert equations between AsciiMath, LaTeX and MathML: auto-detect the input format, produce canonical LaTeX, presentation MathML with an embedded TeX annotation, a best-effort AsciiMath back-translation, a screen-reader aria-label snippet (role=math), and a KaTeX HTML preview.

Design

Image Palette to Design Tokens

Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each

Text Processing

HTML Tag Stripper (HTML标签清除)

Remove HTML tags from code and extract clean text content

Design

QR Code Generator

Generate QR codes from URLs or text with customizable size and colors

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"
}

Outcome

A dark-themed, text-only signature using Georgia font with a green accent color and an embedded GitHub icon.