Create a professional HTML email signature

An email signature (also called an email footer) is a block of information at the end of every sent message. It contains contact details, job title, company name, and often a link to the website or meeting calendar.

The recipient does not have to search for the phone number in previous messages - all details are readily available. A professional email signature also shows that you pay attention to details and maintain a consistent company image in business correspondence.

The Details tab contains all the fields you can fill in. Only two are required: name and email address. The remaining fields are optional and will appear in the signature only when filled in.

Fields in the Details tab

• Line above name - additional text displayed above the name. You can enter the company name, tagline, or slogan.
• Avatar / logo (image URL) - URL to a profile photo or company logo. The image should be square (min. 120×120 px) and publicly accessible online. After pasting the URL, additional options appear: Avatar shape (round, rounded, or square) and Avatar size (small - 40 px, medium - 56 px, large - 72 px).
• Full name - required field. Enter your full name.
• Name tag - short text next to the name, e.g., pronouns or abbreviated title.
• Job title - your role in the company, e.g., Sales Manager, Marketing Specialist.
• Company name - the name of the organization you represent.
• Additional line - a short description of what you do or what you offer.
• Email - required field. Enter your business email address.
• Phone - contact number. Any format, e.g., +1 555 000 000.
• Website - full URL of your website, starting with https://.
• Address - physical company address (street, city, postal code).
• Formal details - tax ID, license number, or other details required in your industry.

A CTA button (call-to-action) is a clickable element that directs the recipient to a chosen page. It can be a link to a meeting calendar, contact form, or offer. The generator allows adding two CTA buttons.

Main button

1. Open the Buttons tab in the editor.
2. In the Main button section, enter the text the recipient will see, e.g., Schedule a free consultation.
3. In the CTA link field, paste the full URL. The address must start with https://.

Secondary button

You can add a second CTA button in outline style (transparent background with border). Fill in the fields in the Secondary button section the same way as for the main button.

Button rounding

At the bottom of the Buttons tab you will find the Button rounding option. Three variants are available: None (sharp corners), Slight (slightly rounded), or Full (oval button).

If you leave both fields empty, the button will not appear in the signature. If you fill in only one field, the button will also not be visible - both text and link are needed.

In the Social Media tab you can add links to your profiles. The generator supports twelve platforms: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (formerly Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram, and Pinterest.

How to do it

1. Open the Social Media tab in the editor.
2. Next to each platform you will find a URL field. Paste the full link to your profile, e.g., https://www.linkedin.com/in/yourprofile.
3. Fill in only the fields you need. Empty fields will not appear in the signature.

Social media icons

At the bottom of the Social Media tab you will find the Show icons next to service names option. When enabled, links will display as colored SVG icons instead of just names.

• Icon size - options: Small (16 px), Medium (20 px), or Large (24 px).
• Icon color - Platform colors (default colors for each platform), Accent color (uniform accent color), or Text color.

In the Appearance tab you can customize colors, font, and other visual elements of the signature.

Color themes

At the top of the tab you will find five ready-made themes: Dark, Blue, Purple, Green, and Gray. Clicking a theme automatically sets the accent color and text color. This is the quickest way to achieve a consistent signature look.

Colors

• Accent color - used in the side/top bar, CTA button, and links. You can choose any color from the palette.
• Text color - color of all text in the signature (name, contact details, disclaimer).
• Background color - background color of the entire signature. White by default, but you can change it.

Font and size

• Font - options: Arial, Verdana, Tahoma, Trebuchet MS, and Georgia. All are email-safe and will display correctly for the recipient.
• Text size - three options: Small (12 px), Standard (14 px), and Larger (16 px).

Additional settings

• Signature border - you can add a border to the signature by selecting any combination of sides (left, right, top, bottom). Selecting all sides automatically sets a full border. The border uses the accent color.

In the Text Style tab you can individually customize the color and font size for each text element in the signature.

Available elements

Only elements that currently have content in the signature are visible. For each element you can set:

• Name - displayed in accent color by default.
• Job title - role in the company.
• Company - organization name.
• Contact details - email, phone, website (labels).
• Social media - profile links.
• Legal disclaimer - legal text at the bottom of the signature.

How to change color

Next to each element you will find a row of color options. Click a color square to select it. You can also add a custom color by clicking the colored square with a plus - choose a color and click Save. Custom colors (up to 8) are shared between all elements.

The reset icon button restores the default color of the element.

How to change size

In the second row you will find a size control with - and + buttons. The value shows the offset relative to the base font size (set in the Appearance tab). Range: from -4 to +4 pixels.

In the Spacing tab you can precisely control the distances between individual signature elements.

Inner signature padding

At the top of the tab you will find the inner padding option - the distance between the signature content and its edges. Three values are available: 8 px (small), 16 px (medium), and 24 px (large).

Spacing between elements

Below the padding you will find controls for individual signature elements. Each control has + and - buttons to increase or decrease the spacing. Only options for elements currently in the signature are visible.

• After name - spacing below the name line.
• After title / company - spacing below the title and company name line.
• After additional line - spacing below the description (if filled in).
• After contact details - spacing below email, phone, and website.
• After social media - spacing below profile links.
• After CTA button - spacing below the button (if enabled).
• Before disclaimer - spacing above the legal disclaimer text.

If you clear a field (e.g., remove the phone number), the corresponding spacing option will automatically disappear from the tab.

In the Disclaimer / Legal tab you can add legal text that will appear at the bottom of the signature in smaller font.

When to add a disclaimer

• Business correspondence - confidentiality notice and request to delete in case of incorrect delivery.
• Industry requirements - some industries (e.g., legal, medical, financial) require specific information in every message.
• GDPR - information about personal data processing, if the company is a data controller.

By default, the field is filled with a sample confidentiality text. You can edit, delete, or replace it with your own disclaimer. If you leave the field empty, no disclaimer will appear in the signature.

Separator line

Below the text field you will find the Show divider between contact details and disclaimer option. Enable it to add a horizontal line between contact details and the legal disclaimer.

After enabling the line, additional customization options appear:

• Line style - options: solid, dashed, or dotted.
• Line thickness - three options: 1 px, 2 px, or 3 px.
• Line color - default gray (#e5e7eb). You can choose any color from the palette or restore the default by clicking the Default button.

The generator automatically saves all settings in browser memory (localStorage). After refreshing the page or reopening the tool, data, layout, colors, and all other options will be restored.

How does auto-save work?

Every change (text, color, layout, spacing) is immediately saved in browser memory. Saving happens automatically in the background - without clicking any buttons.

How to reset settings

Below the signature preview you will find a Reset appearance button. After clicking, a confirmation dialog will appear. Confirming the reset will restore all data and settings to default values. This operation cannot be undone.

Export and import configuration

Below the signature preview you will find two additional buttons: Export settings and Import settings. Export saves all data, colors, layout, spacing, and text styles to a JSON file. Import loads a previously saved configuration from a file.

This feature is especially useful when you want to transfer the signature configuration between computers, share settings with colleagues, or keep a backup of your settings before a reset.

The preview panel displays on the right side of the editor and automatically updates with every change. The preview is sticky, so it remains visible even while scrolling through editing options.

Switching preview background

Above the preview you will find three background change buttons: Light (default gray background), Dark (dark background, useful for checking readability on dark backgrounds), and Checkerboard (checkerboard pattern, lets you see transparency and signature edges).

Action buttons

Below the preview you will find several buttons:

• Copy signature (Gmail / Outlook) - copies the signature to clipboard as formatted HTML. Paste it directly in signature settings.
• Copy HTML code - copies the raw HTML code of the signature to clipboard. Useful when you want to paste code in an HTML editor or CMS.
• Download as HTML - saves the signature code as an .html file to disk. Useful for archiving or sharing with a developer.
• View HTML code - opens a modal with the full HTML source code of the signature. You can review the code and copy it directly from the modal.
• Export settings - saves the full signature configuration (data, colors, layout, spacing, styles) to a JSON file.
• Import settings - loads a configuration from a JSON file. All settings will be automatically applied.
• Reset appearance - restores all data and settings to default values (after confirmation).