Outlook vs Gmail Signature: Key Differences You Need to Know
Your signature looks perfect in Gmail. You send it to a colleague on Outlook — it’s broken. Why? Because Gmail and Outlook render HTML completely differently. Understanding the gap between them is the only way to build a signature that works in both.
By the NeatStamp Team · Published March 2026 · 10 min read
The rendering engine problem
Gmail and Outlook don’t just look different — they process HTML using entirely different engines, and that difference explains most signature breakage.
Gmail
WebKit-based rendering
Gmail renders email in a browser-like environment. It understands modern CSS fairly well, but it aggressively strips anything that could interfere with its own interface — most notably CSS classes, style blocks, and external stylesheets. What remains after Gmail’s sanitization pass is a limited subset of CSS, mostly inline styles on individual elements.
Outlook Desktop
Microsoft Word rendering engine
Outlook 2016, 2019, 2021, and 2024 all use the Word rendering engine to display HTML email. Word was designed for print documents, not web pages. It ignores most modern CSS layout properties, doesn’t understand flexbox or grid, can’t apply border-radius, and has its own interpretation of the box model. If you wrote HTML specifically for Word, it would work fine. HTML written for a browser often doesn’t.
Outlook on the web (office.com) is a separate case — it uses a more modern HTML renderer and behaves more like Gmail. But most corporate users who are “on Outlook” are using the desktop app, which means the Word engine. That’s the one you need to design for.
There’s also the question of Gmail on mobile. The Gmail iOS and Android apps strip CSS more aggressively than the web version. A signature that works in Gmail web may still have issues on the Gmail mobile app. This is a separate problem from the Outlook issue, but worth keeping in mind. For more detail, see the mobile-friendly email signature guide.
CSS support: side-by-side comparison
Here’s a specific breakdown of properties that matter for email signatures and how each client handles them.
| Feature | Gmail (web) | Outlook desktop |
|---|---|---|
| CSS classesBoth need inline CSS | Stripped | Stripped |
| Inline CSSOutlook ignores some properties | Supported | Partial |
| border-radiusCorners appear square in Outlook | Supported | Ignored |
| Background imagesUse solid colors instead | Partial | Needs VML |
| FlexboxUse tables for layout | Partial | None |
| CSS GridUse tables for layout | Partial | None |
| SVG imagesUse PNG instead | Renders | Blocked |
| Base64 imagesUse hosted URLs | Supported | Converts to attachment |
| max-widthUse width attribute instead | Supported | Ignored |
| width attribute (HTML)Safe in both | Supported | Supported |
| Web fonts (@font-face)Use system fonts | Stripped | Stripped |
| Table-based layoutThe cross-client safe approach | Supported | Supported |
The pattern that emerges from this table is clear: both clients strip CSS classes, so inline CSS is non-negotiable for either. Beyond that, Outlook strips more than Gmail does. If you design specifically to pass Outlook’s restrictions, the result will also work in Gmail. The reverse isn’t reliable.
CSS classes: both clients strip them
This one surprises people. You might expect Outlook to be the bad actor here, but Gmail also removes CSS class definitions. A style like.signature-name { font-size: 16px; }gets stripped by both. The workaround is the same in both cases: use inline styles directly on every element. style="font-size:16px;" on the element itself. It’s verbose but it’s the only approach that survives both clients.
border-radius: Gmail yes, Outlook no
If your signature design includes rounded profile photos, rounded buttons, or pill-shaped elements, those will display in Gmail but appear as hard-edged rectangles in Outlook. There’s no VML workaround for border-radius the way there is for background images. If consistent appearance matters to you, design without rounded corners.
SVG icons: use PNG
SVG is completely blocked by Outlook. If you have social media icons as SVG files in your signature, Outlook recipients won’t see them — no placeholder, just nothing. Use PNG icons hosted at a publicly accessible URL. 24x24 pixels at 2x resolution (so rendered at 24px but the file is 48x48) works well across screens. For more on this, see the HTML email signature guide.
Base64 images: use hosted URLs
Some tools embed images as base64 strings directly in the HTML, which seems convenient but creates two problems. First, it makes the HTML much larger, which can cause signatures to be clipped in Gmail (Gmail clips messages over ~102KB). Second, Outlook converts base64 images to attachments — they don’t show inline. Always use a hosted image URL likehttps://yoursite.com/signature-logo.png.
max-width vs width
Gmail respects max-widthas a CSS property. Outlook ignores it. If you want to constrain your signature to 600px, don’t use style="max-width:600px;"— use the HTML width="600" attribute on your table element instead. Both clients respect HTML attributes on table elements.
How to install a signature in Gmail
Gmail’s signature editor is entirely web-based. The steps are the same whether you’re on a paid Workspace account or a free Gmail account.
- 1
Open Gmail Settings
Click the gear icon in the top-right corner, then click "See all settings".
- 2
Find the Signature section
On the General tab, scroll down to the Signature section. Click "Create new" and give it a name.
- 3
Paste your HTML
Gmail doesn't have a direct HTML paste button in the visible editor. To paste HTML: copy your signature HTML, then in the signature text area, use the "Insert HTML" option if your browser supports it, or paste the rendered output from NeatStamp's copy-to-clipboard function which handles Gmail formatting automatically.
- 4
Set as default
Under the signature box, set it as the default for new emails and/or replies. Save changes at the bottom of the page.
- 5
Verify
Open a new compose window and check how the signature appears. Send a test to another account if possible.
For a full walkthrough with screenshots, see the Gmail signature setup guide. If your Gmail signature isn’t working after installation, the Gmail signature troubleshooting guide covers the most common causes.
How to install a signature in Outlook
Outlook’s signature installation is more involved than Gmail’s, and there are a few places where things commonly go wrong.
- 1
Open the Signatures editor
In Outlook desktop: File > Options > Mail > Signatures. Or open a new email and go to Insert > Signature > Signatures. Both open the same dialog.
- 2
Create a new signature
Click "New", give the signature a name, and click OK.
- 3
Paste your HTML
The Signatures editor shows a WYSIWYG view. Do not paste HTML code directly into this box — it will show as raw code. Instead, use the HTML editor button (if available in your Outlook version) or paste the rendered visual output. NeatStamp generates a copy-paste ready version specifically for Outlook.
- 4
Assign to account
In the top-right of the dialog, set this signature as the default for new messages and/or replies on the relevant email account.
- 5
Save and test
Click OK, then open a new email to verify. Check spacing, image rendering, and that links work.
Common Outlook gotcha:If you paste your signature HTML into a compose window (not the Signatures editor), Outlook will add its own formatting on top of yours. Always use File > Options > Mail > Signatures to set your default signature.
For detailed instructions including Outlook for Mac and Outlook Web, see the Outlook signature setup guide. If something’s not working, the Outlook signature troubleshooting guide has fixes for the most common problems.
What happens when Gmail sends to Outlook (and vice versa)
The rendering problem isn’t just about where you install the signature — it’s about where the recipient reads it. When a Gmail user sends an email to an Outlook user, the Outlook recipient sees the signature rendered by Outlook’s Word engine. If the signature was built with Gmail-specific CSS, it may look broken on the receiving end even though it looked fine when you composed it.
Gmail sender → Outlook recipient
- Recipient sees it through Outlook's Word engine
- border-radius on your profile photo: disappears
- SVG icons: blocked, no fallback shown
- Flexbox layout: collapses unpredictably
- Background color gradients: fall back to flat or nothing
Outlook sender → Gmail recipient
- Recipient sees it through Gmail's WebKit engine
- Table-based Outlook signatures look fine in Gmail
- VML background image fallbacks are ignored (but harmless)
- Outlook-safe inline CSS renders correctly
- Usually the safer direction — Outlook-built signatures travel well
The practical takeaway: design for Outlook first. If your signature works in Outlook desktop, it will almost certainly work in Gmail. The reverse isn’t true. This is also why Outlook-compatible signatures are generally the baseline — you can always see what yours looks like in both by reading the Outlook-compatible email signature guide.
The cross-client safe approach
You don’t need to memorize every CSS quirk. Four rules cover the vast majority of cross-client problems.
Table-based layout, not flexbox or grid
Every email client — including every version of Outlook — understands HTML tables. Use tables to arrange your layout columns. It feels old-fashioned, but it’s the only approach with reliable cross-client support. Your signature is not a webpage; it’s a table.
Inline CSS on every element
Don’t use a style block. Don’t use CSS classes. Every element that needs styling gets a style= attribute directly. Yes, this means repeating font-family on every table cell. That’s what cross-client compatibility requires.
Hosted images, not base64 or SVG
Your logo, profile photo, and social icons should all be PNG files hosted at public URLs. This prevents Outlook’s base64-to-attachment conversion and avoids SVG blocking. It also makes your HTML smaller and less likely to trigger Gmail’s clipping.
Width attributes, not max-width CSS
Set widths using the HTML width attribute on table and td elements. Outlook respects HTML attributes. Use style="width:600px" as a secondary fallback, but the attribute takes priority in Outlook.
Following these four rules won’t give you a signature with rounded profile photos or gradient backgrounds. Those look nice in Gmail previews but break in Outlook. A cross-client safe signature uses solid colors, rectangular images, system fonts like Arial or Georgia, and plain table structure. It looks clean in every client rather than impressive in one and broken in another.
For a detailed look at what to include in the HTML itself, the Outlook HTML signature guide goes deep on the actual code structure. If you want to see how a dark mode compatible signature handles both clients, the dark mode compatible signature guide covers the added complexity.
How NeatStamp handles both
Every signature NeatStamp generates uses the four rules above by default. The output is table-based HTML with inline CSS, hosted image references, and width attributes on table elements. We test each template in Gmail web, Outlook 2021 desktop, and Outlook Web before publishing it.
When you copy your signature from NeatStamp, you get two options: a Gmail copy and an Outlook copy. The Gmail version is formatted for direct paste into Gmail’s signature editor. The Outlook version includes additional table structure and avoids any properties Outlook can’t handle. The content and design are identical — only the HTML structure differs slightly to account for each client’s quirks.
You don’t need to know which properties Outlook ignores or how to write VML. You build the signature once in the NeatStamp editor, and the tool generates compatible HTML for both clients automatically.
If you want to see what the output looks like before you build anything, the template gallery shows previews of each design in both Gmail and Outlook rendering. You can also check the pricing page — the free tier generates fully working, cross-client compatible signatures with no account required.
Frequently asked questions
Why does my Gmail signature look broken in Outlook?
Gmail and Outlook use completely different rendering engines. Gmail is WebKit-based; Outlook desktop uses the Microsoft Word rendering engine. CSS that Gmail handles fine — like flexbox, border-radius, or background images — gets stripped or ignored by Outlook. The fix is to use table-based HTML with inline CSS, which both clients handle consistently.
Does Outlook support HTML email signatures?
Yes, but only a limited subset of HTML and CSS. Outlook desktop (2016, 2019, 2021, 2024) uses the Word rendering engine, which treats email like a Word document. It ignores CSS properties like border-radius, background-image, flexbox, and grid. Outlook on the web (office.com) is more capable, but most people in corporate environments use the desktop app.
Can I use the same HTML signature in Gmail and Outlook?
Yes, if you write it correctly. Use table-based layout instead of flexbox or grid. Use inline CSS instead of CSS classes or a style block. Use hosted images (not base64 or SVG). Use width attributes on table cells instead of max-width. These four rules get you most of the way to a signature that renders correctly in both clients.
Does Gmail support CSS in email signatures?
Gmail supports some inline CSS, but it strips CSS classes and most style block declarations. Properties like border-radius and box-shadow work. Flexbox is partially supported in Gmail's web interface but not consistently in the Gmail mobile app. The safest approach is inline CSS on table elements.
Why does Outlook show my logo as an attachment?
You're probably using a base64-encoded image. Outlook converts base64 images to attachments instead of displaying them inline. Use a hosted image URL (https://yourdomain.com/logo.png) instead. This also makes your signature smaller and faster to load.
Why does my signature lose formatting when I reply in Outlook?
Outlook strips styles from quoted content in replies. This is a known behavior. Your signature should appear correctly in new emails. If even new emails look wrong, check that your HTML uses inline styles, not CSS classes or a style block, and that images are hosted URLs rather than base64 or attached files.
Does Gmail show SVG icons in email signatures?
Gmail renders SVG, but Outlook blocks it entirely. If you use SVG social icons or logos in your signature, they'll display fine in Gmail but won't appear in Outlook at all. Use PNG icons for cross-client compatibility. A 24x24 or 32x32 PNG hosted on your server is the safest choice.
What's the difference between installing a signature in Gmail vs Outlook?
In Gmail, you paste HTML into Settings > See all settings > Signature. In Outlook desktop, you go to File > Options > Mail > Signatures, create a new signature, and paste the HTML into the editor (or use Insert > Signature to get the HTML editor view). The Outlook editor also has a quirk: it adds its own formatting when you paste plain HTML, so always use the dedicated signature editor rather than pasting into a compose window.
Build a signature that works in both
NeatStamp generates Outlook-safe and Gmail-ready HTML from the same design. Free, no account required, ready in under 60 seconds.