Every email you send opens in dozens of different email clients, and each one supports a different slice of HTML and CSS. The classic Outlook for Windows desktop app still renders email with Microsoft Word. Apple Mail supports almost everything a modern browser does. Gmail sits somewhere in between.
You can design for the lowest common denominator and send a plain email that looks the same everywhere. Or you can design something beautiful that breaks in half your audience's inboxes. Progressive enhancement, sometimes called progressive improvement, is the better option: build an email that works everywhere, then layer extra polish on top for the clients that can show it.
What progressive enhancement means in email
The idea comes from web development, and it fits email perfectly. Start with a solid baseline that every email client can render, then add enhancements that supporting clients display and everyone else simply ignores. One email, one build, and each recipient sees the best version their email client can handle.
In practice, a single email naturally ends up with three tiers:
- Basic: what older clients like Outlook for Windows show. Solid colours, square corners and a clear layout. The message, offer and call to action all work.
- Improved: what clients like Gmail show. Rounded buttons, background gradients and hover states start to appear.
- Advanced: what clients like Apple Mail show. Shadows, animation, dark mode styling and interactive elements such as colour pickers, carousels and tap-to-reveal content.
The key is that nobody gets a broken email. Someone reading in Outlook for Windows doesn't know they're missing a gradient. They just see a clean, well-designed email.
The rules of progressive enhancement
- Design the baseline first. Start every email with standard layouts that work everywhere. If the baseline isn't good enough to send on its own, enhancements won't save it.
- Never put the message in the enhancement. Copy, offers and calls to action belong in the baseline. An enhancement can make them more appealing, but never carry them.
- Always declare a fallback first. Set a solid background colour before a gradient, and a border before a shadow, so clients that drop the enhancement still show something sensible.
- Keep contrast independent of effects. Text must be readable without text shadows, and cards must stand apart without box shadows.
- Test both versions. Check the enhanced version in clients that support it, and the baseline in clients that don't.
CSS enhancements, and where they work
Below are the most useful CSS enhancements for email, with the level of support for each. All support data comes from caniemail, the open database of email client CSS and HTML support, and each section links to the full results for that feature. Email clients change regularly, so check the latest data before relying on any feature.
Rounded corners: border-radius
Rounded buttons and cards are the easiest win, because support is widespread. According to caniemail's border-radius data, it's supported in Apple Mail, Gmail, Outlook.com, the Outlook apps for Mac, iOS and Android, and Samsung Email. Yahoo Mail supports it partially: elliptical corners written with the slash notation aren't supported.
The exception is Outlook for Windows, which shows square corners. That's a perfectly acceptable fallback. If rounded buttons are essential to the brand, caniemail notes they can be recreated in Outlook for Windows with a VML roundrect, for example using a generator like buttons.cm.
Button hover states: :hover
A button that changes colour on hover feels polished and makes it obvious the button is clickable. It only matters for recipients using a mouse or trackpad, so think of it as a desktop enhancement.
According to caniemail, :hover is supported in Apple Mail, Gmail on the web, Yahoo Mail, Samsung Email and Outlook for Android. Support is partial in the Gmail Android app, where it only works with Google accounts, and in Outlook.com and Outlook for Mac, which only support it on type selectors such as a:hover rather than classes. It isn't supported in the Gmail iOS app, Outlook for iOS or Outlook for Windows.
Hover styles can't be written inline, so they go in a <style> block in the head, with !important to override the inline background colour:
<style>
.btn a:hover { background-color: #0077c8 !important; }
</style>
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="btn" style="border-radius:6px; background-color:#00aeef;">
<a href="https://example.com" style="display:inline-block; padding:14px 28px; border-radius:6px; background-color:#00aeef; color:#ffffff; font-weight:bold; text-decoration:none;">Shop now</a>
</td>
</tr>
</table>Want the colour to fade rather than snap? Support for smooth transitions is much narrower. caniemail's transition data shows full support only in Apple Mail, partial support in Yahoo Mail and Samsung Email, and no support in Gmail or any version of Outlook. Add a transition if you like, but it's a small extra for a small audience.
Background gradients: linear-gradient()
A subtle gradient can lift a hero or a button. caniemail's linear-gradient data shows support in Apple Mail and in Gmail on the web and iOS. In the Gmail Android app it's buggy, because gradients don't work inline in the background-image property. Samsung Email supports gradients except with Hotmail and Outlook accounts. Outlook (all versions) and Yahoo Mail don't support them. Radial gradients have very similar support.
The fallback is simple: declare a solid background colour first. Clients that don't understand the gradient keep the solid colour.
<td style="background-color:#0077c8; background-image:linear-gradient(135deg, #00aeef 0%, #0077c8 100%);">caniemail also notes that Outlook for Windows can display gradients using VML, but for most emails a well-chosen solid colour is the better trade-off.
Box shadows: box-shadow
Soft shadows give cards and buttons depth. According to caniemail, box-shadow is supported in Apple Mail, Outlook.com, the Outlook apps for Mac, iOS and Android, and Samsung Email. The Gmail apps only support it with non-Google accounts, and it isn't supported in Gmail on the web, Yahoo Mail or Outlook for Windows.
Because so many inboxes drop it, never rely on a shadow to separate content. Pair it with a light border or a contrasting background, so the card still stands apart without it:
<td style="border:1px solid #dbe4e8; border-radius:12px; background-color:#ffffff; box-shadow:0 8px 24px rgba(0,0,0,0.08);">Text shadows: text-shadow
Text shadows can add depth to large headlines, or a little extra legibility for text over an image. Support is narrower than you might expect. caniemail's text-shadow data shows support in Apple Mail, Yahoo Mail and Samsung Email, and no support in Gmail or any version of Outlook. caniemail's text-shadow results are also some of its oldest, so it's worth testing in your own key clients.
Treat text shadows as decoration only. Text must meet contrast requirements without them, so when text sits over a background image, set a dark background colour behind it too, in case the image doesn't load.
<h1 style="color:#ffffff; text-shadow:0 2px 6px rgba(0,0,0,0.35);">The summer collection is here</h1>Dark mode styling: prefers-color-scheme
Dark mode media queries let you fine-tune colours and swap logos for recipients using dark mode. According to caniemail, @media (prefers-color-scheme) is supported in Apple Mail, Outlook.com, the Outlook apps for Mac, iOS and Android, and Samsung Email. It isn't supported in Gmail, Yahoo Mail or Outlook for Windows, and several of those clients apply their own automatic colour changes instead. Your baseline should therefore survive automatic dark mode, with dark mode styles as an enhancement on top.
Animation: CSS animation and animated GIFs
CSS animation is one of the most limited enhancements. caniemail's animation data shows support in Apple Mail and Samsung Email, but not in Gmail, Yahoo Mail or any version of Outlook.
Animated GIFs are far more widely supported. According to caniemail, they play in Apple Mail, Gmail, Yahoo Mail, Samsung Email and most Outlook apps. Outlook for Windows only supports them partially: it doesn't play the animation, and with an Office 365 account it plays the animation three times, then stops and shows a play button.
So design every GIF so its first frame works as a static image. A useful trick is to start the animation halfway through, so the first frame already shows the key message, then transition out and back in.
The advanced tier: interactivity
Interactive elements, such as carousels, colour pickers, accordions and tap-to-reveal offers, are the furthest you can take progressive enhancement. Most are built with hidden checkboxes and radio buttons styled with the :checked selector. According to caniemail, :checked is supported in Apple Mail, Yahoo Mail and Samsung Email. The Outlook apps for Mac, iOS and Android, and Outlook.com, support it partially, on type selectors only. Gmail and Outlook for Windows don't support it.
A good example is a product email. In the interactive version, recipients pick a colour and see the product change. In the fallback, they see a standard hero image, the key benefits and a clear button to the product page. Both versions sell the product, and the interactive one is a bonus for the inboxes that can show it.
The safest approach is to show the fallback by default, and only reveal the interactive version with CSS that unsupported clients ignore. We cover the technique step by step in our interactive character builder tutorial, and the wider options, including AMP for Email, in Interactive email: what's possible, and where it works.
Support at a glance
A summary of the features above, based on caniemail's latest results for each client. "Partial" covers anything with limitations or bugs, so follow the links above for the details.
| Feature | Apple Mail | Gmail | Outlook for Windows | Outlook.com and apps | Yahoo Mail | Samsung Email |
|---|---|---|---|---|---|---|
| border-radius | Yes | Yes | No | Yes | Partial | Yes |
| :hover | Yes | Partial | No | Partial | Yes | Yes |
| transition | Yes | No | No | No | Partial | Partial |
| linear-gradient() | Yes | Partial | No | No | No | Partial |
| box-shadow | Yes | Partial | No | Yes | No | Yes |
| text-shadow | Yes | No | No | No | Yes | Yes |
| prefers-color-scheme | Yes | No | No | Yes | No | Yes |
| CSS animation | Yes | No | No | No | No | Yes |
| Animated GIF | Yes | Yes | Partial | Yes | Yes | Yes |
| :checked | Yes | No | No | Partial | Yes | Yes |
Gmail covers Gmail on the web and the Gmail apps. Outlook.com and apps covers Outlook.com and the Outlook apps for Mac, iOS and Android, which vary for some features, as described above. Yahoo Mail refers to Yahoo Mail on the web. Outlook for Windows refers to the classic desktop app, which caniemail tests in versions 2007 to 2019.
Know your audience
How much effort enhancements deserve depends on who's reading. A consumer brand whose list is mostly Apple Mail will see most enhancements most of the time. A B2B audience reading in Outlook for Windows will mostly see the baseline. Check the email client breakdown in your email platform's reporting before deciding how far to go.
Build enhancements into your design system
Progressive enhancement works best when it isn't reinvented for every campaign. Build the baseline and the enhancements into each module once, as part of your email design system: buttons with hover states and Outlook-safe fallbacks, cards with borders and shadows, heroes with solid colours behind gradients. Then every email your team builds gets the best experience in every inbox, without anyone having to think about it.
We design and build email design systems and interactive email modules with fallbacks built in. Book a free consultation to talk about yours.