Create a polished, professional email signature in seconds — no account required, no data sent to any server. Fill in your details, pick a template, and copy the HTML directly into Gmail, Outlook, or Apple Mail.

Your Details

  <div class="sa-field">
    <label>Full Name</label>
    <input type="text" id="sa-name" placeholder="Jane Smith" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>Job Title</label>
    <input type="text" id="sa-title" placeholder="Senior Product Designer" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>Company</label>
    <input type="text" id="sa-company" placeholder="Acme Inc." oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>Phone</label>
    <input type="text" id="sa-phone" placeholder="+1 (555) 000-0000" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>Email</label>
    <input type="email" id="sa-email" placeholder="jane@acme.com" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>Website</label>
    <input type="text" id="sa-website" placeholder="https://acme.com" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>LinkedIn URL</label>
    <input type="text" id="sa-linkedin" placeholder="https://linkedin.com/in/janesmith" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>Twitter / X Handle</label>
    <input type="text" id="sa-twitter" placeholder="@janesmith" oninput="saRender()">
  </div>
  <div class="sa-field">
    <label>GitHub Username</label>
    <input type="text" id="sa-github" placeholder="janesmith" oninput="saRender()">
  </div>
</div>

<div class="sa-panel" style="margin-top:20px;">
  <h2>Style Options</h2>

  <div class="sa-field">
    <label>Layout</label>
    <select id="sa-layout" onchange="saRender()">
      <option value="horizontal">Horizontal (photo left, text right)</option>
      <option value="vertical">Vertical (stacked)</option>
    </select>
  </div>

  <div class="sa-field">
    <label>Color Scheme</label>
    <div class="sa-swatches" id="sa-swatches">
      <span class="sa-swatch active" data-color="#6366f1" style="background:#6366f1" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#0ea5e9" style="background:#0ea5e9" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#10b981" style="background:#10b981" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#f59e0b" style="background:#f59e0b" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#ef4444" style="background:#ef4444" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#8b5cf6" style="background:#8b5cf6" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#1e293b" style="background:#1e293b" onclick="saPick(this)"></span>
      <span class="sa-swatch" data-color="#64748b" style="background:#64748b" onclick="saPick(this)"></span>
    </div>
  </div>

  <div class="sa-field">
    <label>Font</label>
    <select id="sa-font" onchange="saRender()">
      <option value="Arial, Helvetica, sans-serif">Arial (safe)</option>
      <option value="Georgia, serif">Georgia (classic)</option>
      <option value="'Courier New', monospace">Courier New (dev)</option>
      <option value="Verdana, Geneva, sans-serif">Verdana</option>
      <option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
    </select>
  </div>

  <div class="sa-field">
    <label>Separator Style</label>
    <select id="sa-sep" onchange="saRender()">
      <option value="solid">Solid line</option>
      <option value="dashed">Dashed line</option>
      <option value="dotted">Dotted line</option>
      <option value="none">No separator</option>
    </select>
  </div>

  <div class="sa-field">
    <label>Photo Placeholder</label>
    <select id="sa-photo" onchange="saRender()">
      <option value="circle">Circle avatar</option>
      <option value="square">Square avatar</option>
      <option value="none">No photo</option>
    </select>
  </div>
</div>

Template

  <div class="sa-preview-label">Live Preview</div>
  <div class="sa-preview-wrap">
    <div id="sa-preview"></div>
  </div>

  <div class="sa-actions">
    <button class="sa-btn sa-btn-primary" onclick="saCopyHTML()">Copy as HTML</button>
    <button class="sa-btn sa-btn-secondary" onclick="saToggleCode()">View HTML</button>
    <button class="sa-btn sa-btn-secondary" onclick="saReset()">Reset</button>
  </div>
  <span class="sa-toast" id="sa-toast">Copied to clipboard!</span>
  <textarea class="sa-html-out" id="sa-html-out" readonly></textarea>
</div>
How to Install Your Signature
Gmail
  1. Click Copy as HTML above.
  2. Open Gmail → Settings (gear icon) → See all settings.
  3. Under the General tab, scroll to Signature and click Create new.
  4. Give it a name (e.g., "Professional"), then click inside the signature box.
  5. Switch to HTML mode: in the toolbar, click the ⋮ More options menu → Edit as HTML.
  6. Paste your copied HTML and click OK.
  7. Scroll down and click Save Changes.
Outlook (Windows & Mac)
  1. Click Copy as HTML above.
  2. Open a New Email in Outlook.
  3. Go to Insert → Signature → Signatures…
  4. Click New, name it, then click inside the editing area.
  5. Open Notepad, paste the HTML, and save it as sig.htm.
  6. In the Outlook signature editor, click the source / HTML button and paste your HTML, or drag the saved .htm file.
  7. Click OK and set as default if desired.
Apple Mail (macOS)
  1. Click Copy as HTML above.
  2. Open Mail → Settings → Signatures.
  3. Select your account, click + to add a new signature.
  4. Type a placeholder (e.g., "x") in the signature body.
  5. Quit Mail, then open Terminal and run:
    open ~/Library/Mail
  6. Navigate to V10 (or your version) → [Account folder] → Data → Signatures.
  7. Open the .mailsignature file in a text editor, find the placeholder, and replace the body content with your copied HTML.
  8. Save and reopen Mail.

Related Free Tools

Tips for a Great Email Signature

Keep it concise. Aim for 4–6 lines of information. Recruiters and clients scan quickly — a wall of text undermines professionalism.

Use email-safe fonts. The generator defaults to web-safe fonts (Arial, Georgia, Verdana) that render correctly in every email client without loading external fonts.

Avoid images when possible. Many email clients block images by default. If you need a logo, host it at a stable URL and use an <img> tag — the HTML output makes this easy to add manually.

Test before sending. Send yourself a test email after installing your signature. Check it on mobile and desktop.

Update regularly. Changed roles or phone numbers? Refresh your signature so contacts always have accurate information.

Email Template Builder Email Validator