Which CSS properties are risky in HTML email?
Avoid or limit floats, background-image, position, flex/grid, box-shadow, and complex selectors. Outlook’s Word engine and some webmail clients ignore or mangle them. Prefer table markup and simple inline CSS.
Key Takeaways
- ✓ Use tables for layout instead of floats/flex/grid.
- ✓ Provide solid color fallbacks for background images.
- ✓ html2email flags partially supported properties.
Avoid or limit floats, background-image, position, flex/grid, box-shadow, and complex selectors. Outlook’s Word engine and some webmail clients ignore or mangle them. Prefer table markup and simple inline CSS.
| Property | In email |
|---|---|
float | Unreliable in Outlook; use tables |
background-image | Outlook ignores; use VML + solid fallback |
position: absolute/fixed | Avoid; not supported |
flex / grid | Use nested tables instead |
box-shadow | Often ignored in Outlook |
Risky CSS in email - prefer tables and inline styles.
Why are floats unreliable?
Floats often break in Outlook. Use tables and align attributes instead of floating columns.
What about background-image?
Outlook ignores CSS backgrounds. Add VML fallbacks and always set a solid background color.
Are border-radius and box-shadow safe?
Radius is partly supported; shadow is often ignored in Outlook. Test and provide square-corner fallbacks.
Can I use position or z-index?
Avoid absolute/fixed positioning; Outlook and many webmail clients ignore it. Keep stacking simple and linear.
How does html2email detect risky properties?
The CssPropertyValidator looks for floats, background-image, and other partially supported properties, then raises warnings with context.
What should I use instead of flex/grid?
Use nested tables with explicit widths. Stack columns on mobile via media queries where supported, but keep table fallbacks.
Do gradients work?
Gradients work in many webmail clients but not Outlook. Provide a solid fallback color.
Are complex selectors OK?
Keep selectors simple. Many clients strip head CSS; inline styles on individual elements are safer.
Validator highlighting partially supported CSS properties.
Key stats and sources
- Outlook Word engine ignores background-image and many position/float rules.
- Gradients are not supported in Outlook; solid fallback required.
- html2email flags risky properties so you can swap to table-safe patterns.
Frequently Asked Questions
Related Resources
Optimize Your Emails Today
Send validation-checked HTML emails directly from your browser.
Gmail/Yahoo - Free
No credit card required • Free