# Outlook for iPhone and Android email support: CSS and images (tested 2026) Which CSS and HTML work in Outlook for iOS and Outlook for Android? Results from test emails sent to both apps, with screenshots and a comparison. When people picture "Outlook", they tend to picture a big desktop app on a Windows PC. But a good share of the people who use Outlook at work read their email somewhere else entirely: on a phone, in the Outlook app for iPhone or Android, between meetings or on the train home. Those mobile apps are their own thing. They don't render email like classic Outlook for Windows, and they don't quite match new Outlook either. So if you only test your email in desktop Outlook, you can miss a gradient button that turns into a flat block on the phone, or rely on a fix that phone readers never receive. This guide shows what the Outlook mobile apps support in our tests, how they differ from the other Outlooks, and what to change so your email holds up on a phone. ## How the Outlook mobile apps differ from desktop Outlook ### A third way of displaying email Classic Outlook for Windows uses Microsoft Word to lay out email, which is why it ignores so much CSS. The mobile apps don't use Word. They handle modern layout much better, including responsive designs, but they still skip several features that new Outlook for Windows applies, such as gradients. ### Why classic Outlook fixes don't help here Many email templates include special code for classic Outlook inside `[if mso]` conditional comments: VML buttons, fixed-width tables and background images. The mobile apps ignore those blocks and show your regular HTML instead. That is usually what you want, but it means the regular version has to look finished on a phone. ## How we tested the Outlook mobile apps ### The test emails We sent both apps the same CSS test email we sent to 10 other email apps. Every one of its 20 lines tests a single feature, such as rounded corners, a custom font or a media query (a rule that rearranges the layout on small screens). Each line turns from red to green only if the app applies its feature. A second test email covers image formats, video and other HTML elements. ### Where the screenshots come from The usual way to check this is to install Outlook on an iPhone and an Android phone and send every draft to both. Instead, we sent the test emails through MailSlurp, an email testing platform that captures screenshots from both apps automatically. Our iPhone captures come from physical devices; the Android app runs on an Android emulator. These results are from our November 2026 tests. ## How automated device rendering works Choose the devices and email services you want to test, and MailSlurp gives you a special email address. Send your campaign to that address. MailSlurp opens the email in the selected apps and webmail services, then captures screenshots automatically. The screenshots come back together, ready to compare across phones, tablets and computers. Check the layout, images and buttons, then share a result link so your team can review the same version of the email. ![One email branches to an iPhone, a desktop computer and a tablet for automated rendering.](/_astro/automated-device-rendering-v1.DkA8n4lC_20VMnF.webp) ## What CSS works in Outlook for iOS and Android The two apps gave identical results: 10 of the 20 features applied. Here is the CSS test email in each one. Outlook for iOS ![CSS support test in Outlook for iOS with green rows for style class, media query, child combinator, rgba, flex and grid, and red rows for supports, attribute selector, CSS variables, hsl, gradient and before content](/_astro/css-outlook-ios.C_EPDPj8_ZoGJAW.webp) Outlook for Android ![The same CSS support test in Outlook for Android with the same green and red rows as Outlook for iOS](/_astro/css-outlook-android.DvfMqYEg_Z18OBFu.webp) Outlook for iOS and Android applied the same 10 of our 20 CSS features. ### Compared with the other Outlooks | CSS feature | Outlook for iOS and Android | Outlook on the web | New Outlook for Windows | |---|---|---|---| | `@media` query | Yes | Yes | Yes | | `border-radius` and `box-shadow` | Yes | Yes | Yes | | `display: flex` | Yes | Yes | Yes | | `display: grid` | Yes | No | Yes | | `linear-gradient` | No | No | Yes | | `hsl()` colours | No | No | Yes | | `text-shadow` | No | No | Yes | | `@font-face` web font | No | No | No | | CSS variables | No | No | No | | **Total of 20 features** | **10** | **9** | **17** | ### What works well - **Responsive layouts.** Media queries applied, so a layout that stacks its columns on small screens does so in both apps. - **Modern layout.** Flexbox and grid both placed items side by side. Interestingly, grid worked on the phone but not in Outlook on the web, so the same email can look different on the same person's phone and laptop. - **Rounded corners and box shadows** appeared as designed. ### What doesn't - **Gradients.** Our gradient line stayed red. A gradient button shows only its fallback background, so set a solid `background-color` before the gradient and make sure that colour looks intended on its own: ```html ``` - **`hsl()` colours.** These were ignored. Write colours as hex values, or `rgba()`, which worked. - **Text shadows, web fonts and CSS variables.** None applied. The next font in your list is what readers see, so end it with `sans-serif`. ## Images and HTML elements Both apps displayed SVG, WebP, AVIF, PNG and GIF image files, styled the `