Red & Green Gradients
Gradients that bring red and green together — bold contrasts from across the wheel.
Red & Green gradients
8 gradientsSignal Mint
Candy
Easter Pastel
Christmas Morning
Winter Holidays
Microsoft
About red & green gradients
Red and green come from different sides of the colour wheel, so this is a contrast pairing rather than a blend: heat and urgency against freshness and growth. The contrast is the point — it is what makes these gradients stop the eye — but it has a cost: mixed in plain sRGB, the midpoint between two distant hues turns grey and muddy.
There are two fixes, both plain CSS. Add a third stop in a hue that sits between them, or let the browser mix in a perceptual colour space: linear-gradient(in oklch 45deg, #EF4444, #22C55E) keeps the middle bright in current browsers. The most common angle across these 8 gradients is 45°.
Brand gradients here that combine red and green include ones inspired by Figma, Microsoft and Google. Every gradient below copies as CSS, Tailwind or a Figma token in one click.
Start a red & green gradient in the generator, or see every red and green gradient on its own.