Definition
A gradient fallback is a solid colour declared as a backup for CSS gradients in email. Many email clients including Outlook (Windows), Gmail, and some mobile clients strip or fail to render CSS gradients. Without a fallback, the background appears white or transparent, which can break the design.
Implementation
In email HTML, declare the solid colour as a background attribute on a table cell, then layer the gradient using inline CSS:
<td bgcolor="#1a365d" style="background: linear-gradient(90deg, #1a365d, #2b6cb0);">
The bgcolor attribute renders in all clients. Clients that support CSS gradients overlay the gradient on top. Clients that do not show the solid fallback colour.
Testing
Always test gradient designs in Outlook (all versions), Gmail, and Samsung Mail. These are the most common clients that struggle with gradient rendering.
Related Glossary Terms
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
AMP for Email
AMP for Email is a Google-developed framework that allows email messages to include interactive elements like forms, carousels, accordions, and live content. It turns static emails into dynamic, interactive experiences directly inside the inbox.
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Drag-and-Drop Email Editor
A drag-and-drop email editor is a visual interface that allows marketers to build email layouts by dragging content blocks into place without writing HTML or CSS code.
Dynamic Content
Dynamic content in email refers to content blocks that change based on subscriber data, behavior, or preferences within a single email send.
Email Accessibility Guidelines
Email accessibility guidelines ensure emails are usable by people with disabilities, following WCAG standards for screen readers, colour contrast, keyboard navigation, and readable content.