Definition
A gradient fallback is a solid background colour behind a CSS gradient. Not all clients support gradients, so the fallback keeps the design acceptable.
Declare the background-color before the gradient so unsupported clients still render.
Gradient fallbacks keep design acceptable where gradients fail, especially in older Outlook and some webmail. A solid colour behind the gradient preserves readability. Declaring it before the gradient is the safe pattern.
Why Fallbacks Matter
Older Outlook and some webmail tolerate gradients poorly.
A solid colour plus optional image is the safest fallback.
Why It Matters
Gradient fallbacks keep design acceptable where gradients fail. Understanding them prevents broken backgrounds in key clients.
Best Practices
- Always declare a background-color before the gradient.
- Test Outlook, which generally ignores gradients.
- Keep the fallback colour close to the gradient start or end.
- Provide an optional image where needed.
- Review in clients that matter.
Was this useful?
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
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.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
Older Outlook and some webmail tolerate gradients poorly. Gradient fallbacks keep design acceptable where gradients fail, especially in older Outlook and some webmail.
A solid background colour plus an optional image. A solid colour behind the gradient preserves readability.
Browser-based Gmail largely supports them; app behaviour varies. Declaring it before the gradient is the safe pattern.
Declare background-color before the gradient. Gradient fallbacks keep design acceptable where gradients fail, especially in older Outlook and some webmail.
Outlook especially, plus any your audience uses. A solid colour behind the gradient preserves readability.