Mango Tango Gradient
Gradient Details
Linear
135deg
#f7971e
#ffd200
background: linear-gradient(135deg, #f7971e, #ffd200); Usage Examples
As Background
As Button
As Text
Gradient TextAbout This Gradient
The Mango Tango gradient is a smooth linear blend that flows from #f7971e to #ffd200 at a 135-degree angle, creating warm, energetic tones that evoke passion and creativity. Gradients in the warm family are frequently chosen by designers who want to add visual depth and dimensionality without resorting to flat, single-tone fills. The transition from red/warm into red/warm gives this gradient a distinctive character that works equally well as a hero background, UI card accent, or decorative overlay. Whether you are building a landing page, a mobile app, or a data dashboard, the Mango Tango gradient offers an immediately polished, professional appearance that elevates the overall design.
When to Use the Mango Tango Gradient
Because of its warm color palette, this gradient is especially effective in the following design contexts:
- Food and beverage websites to evoke appetite and warmth
- Lifestyle and wellness brands seeking an energetic, inviting feel
- Call-to-action buttons where urgency and excitement are needed
- Social media graphics for promotions and seasonal campaigns
- E-commerce product highlights and sale banners
Apply this gradient sparingly for maximum impact — use it as a focal-point element rather than a page-wide background to keep your design balanced and readable.
Color Information
#f7971e
rgb(247, 151, 30)
Color family: red/warm
Contrast vs white: 2.2:1
#ffd200
rgb(255, 210, 0)
Color family: red/warm
Contrast vs white: 1.5:1
Accessibility Note
The average contrast ratio of these two colors against a white background is approximately 1.9:1. This does not meet the WCAG 2.1 Level AA threshold of 4.5:1 for normal text. If you need to place text on top of this gradient, consider using a semi-transparent dark or white overlay behind the text, or restrict text to bold large headings where the 3:1 Large Text AA threshold may apply. Always verify contrast with your specific text color using a dedicated accessibility checker before shipping to production.
CSS Gradient Tips
Browser Support
Linear gradients using the standard linear-gradient() syntax are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera.
Internet Explorer 10+ also supports them. No vendor prefixes are required for current browser targets, but if you must support very old WebKit browsers, you can optionally add -webkit-linear-gradient() as a fallback.
Providing a Fallback Color
Always declare a solid background-color before your gradient declaration.
If a browser or email client does not support gradients, it will display the solid color instead of nothing.
Choose the dominant color of the gradient — for this preset, #f7971e is a good fallback choice.
Animating Gradients
CSS does not natively animate between two linear-gradient() values, because gradients are treated as images.
A reliable workaround is to set the background-size to a large value (e.g., 200% 200%) and animate background-position using a CSS @keyframes rule to create a flowing, animated effect.
Adjusting the Angle
The default angle for this preset is 135 degrees (top-left to bottom-right). You can change the angle to suit your layout: 0deg flows bottom to top, 90deg flows left to right, and 180deg flows top to bottom. You can also use keyword directions like to right or to bottom right for simpler syntax.
Frequently Asked Questions
What colors are in the Mango Tango gradient?
The Mango Tango gradient blends #f7971e (rgb(247, 151, 30)) with #ffd200 (rgb(255, 210, 0)) across a 135-degree diagonal.
How do I use this gradient in CSS?
Copy the snippet below and add it to any CSS selector. For a text gradient effect, append the background-clip rules shown in the Usage Examples section above.
background: linear-gradient(135deg, #f7971e, #ffd200); Is this gradient accessible?
The Mango Tango gradient has an average color contrast of 1.9:1 against white, which is below the WCAG 2.1 AA threshold of 4.5:1. For text overlays, use large bold text or add a semi-transparent dark scrim behind the text. Decorative uses without text are not subject to contrast requirements.