# Email Signature HTML Builder

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.

> Canonical page: https://elysiatools.com/en/tools/email-signature-html-builder

- **Category:** Design

- **Keywords:** email signature, html signature, gmail signature, outlook signature, apple mail, business card, branding, social icons, dark mode, inline css, mail client, footer

## Overview

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.

## Inputs

- **Full name** (text): Jane Doe
- **Job title** (text): Product Manager
- **Company** (text): Acme Inc.
- **Email** (text): jane@acme.com
- **Phone** (text): +1 555 123 4567
- **Website URL** (text): acme.com
- **Address** (text): 123 Market St, San Francisco, CA
- **Photo / Logo URL** (text): https://…/avatar.png
- **Social links** (textarea): One per line or comma-separated. Auto-detects LinkedIn, X, GitHub, Instagram, Facebook, YouTube.
- **Accent color** (color)
- **Font family** (select)
- **Layout** (select)
- **Theme** (select)

## 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

- Enter your personal details, contact information, and a public URL for your avatar or company logo.
- Select your preferred layout style, choose a web-safe font family, set an accent color, and paste your social media links.
- Choose a theme setting—light, dark, or auto—to control how the signature adapts to dark mode environments.
- Copy 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.

## Frequently asked questions

### 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.

## Related tools

- [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-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
- [HTML Tag Stripper (HTML标签清除)](https://elysiatools.com/en/tools/new-html-tag-stripper): Remove HTML tags from code and extract clean text content
- [QR Code Generator](https://elysiatools.com/en/tools/qr-code-generator): Generate QR codes from URLs or text with customizable size and colors
- [Accessibility Heatmap Generator](https://elysiatools.com/en/tools/accessibility-heatmap-generator): Generate a contrast-focused accessibility heatmap from a UI screenshot or HTML input and suggest stronger patch colors
- [Barcode Batch Generator](https://elysiatools.com/en/tools/barcode-batch-generator): Batch generate Code 128, EAN-13, UPC-A, ITF-14, QR Code, and Data Matrix outputs from CSV or multiline text
- [Meta Tag Extractor](https://elysiatools.com/en/tools/meta-tag-extractor): Extract and analyze meta tags, Open Graph, Twitter Cards, and structured data from web pages
- [ECharts Theme Token Extractor](https://elysiatools.com/en/tools/echarts-theme-token-extractor): Extract design tokens — colors, numbers, font sizes and strings — from an ECharts theme JSON and export them straight into your design system. Paste a theme object (the kind registered via echarts.init(dom, themeName)) and the tool walks every leaf, tagging each color (with optional named/rgb → hex normalization), spacing number, font size and string, then emits clean CSS variables, a Tailwind theme.extend config, Style Dictionary tokens.json, or SCSS variables. Bridges the gap between an ECharts visualization theme and Figma/CSS/Tailwind design tokens without copying each value by hand.
- [Header Remover](https://elysiatools.com/en/tools/header-remover): Remove headers from CSV data to create clean header-less files. Perfect for database imports, data processing pipelines, API integrations, and systems that require header-less CSV format. Features: - Remove first row (header) from CSV data - Remove multiple header rows - Skip empty lines before removing headers - Preserve data integrity - Support various CSV separators - Preview before removal - Data validation options - Batch processing capabilities Common Use Cases: - Prepare data for database imports - Clean up API response data - Remove metadata from exported files - Create header-less data for machine learning - Prepare data for systems that don't use headers - Extract pure data values from structured files

## Samples

- [HTML Viewer Samples](https://elysiatools.com/en/samples/html-viewer-samples): Sample HTML files (semantic page, form, landing page) for the in-browser HTML Viewer
- [HTML with Images Samples](https://elysiatools.com/en/samples/html-with-images): HTML source code samples with images for testing extraction
- [MSG Viewer Samples](https://elysiatools.com/en/samples/msg-viewer-samples): An Outlook MSG email sample for in-browser preview
- [Text with Sensitive Data Samples](https://elysiatools.com/en/samples/text-with-sensitive-data-samples): Text containing various types of sensitive data for testing data masking (phones, emails, ID cards, bank cards)

## Related content

- [HTML Extraction, Cleanup, and Markdown/PDF Export Tools](https://elysiatools.com/en/hubs/html-convert): Compare HTML cleanup, attribute extraction, image-source extraction, HTML-to-Markdown, and HTML-to-PDF tools in one hub for web content conversion workflows.
- [Barcode, QR Code, and Label Tools](https://elysiatools.com/en/hubs/barcode-utility): Compare barcode generation, QR code creation and decoding, UPC/EAN validation, WiFi QR sharing, and printable label tools in one hub.
- [Web Accessibility Audit and Accessible Color Tools](https://elysiatools.com/en/hubs/web-accessibility-audits): Review WCAG issues, screen-reader order, contrast failures, color-vision risk, and accessible palette choices in one hub for website and UI accessibility workflows.
- [HTML Content Extraction, Cleanup, and Delivery Tools](https://elysiatools.com/en/hubs/html-content-extraction-cleanup-and-delivery): Extract links, images, tables, and clean text from HTML, then convert or render the result for reuse and delivery.