Orange & Purple Gradients

About orange & purple gradients

Orange and purple come from different sides of the colour wheel, so this is a contrast pairing rather than a blend: warmth and appetite against creativity and a premium feel. 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, #F97316, #8B5CF6) keeps the middle bright in current browsers. The most common angle across these 22 gradients is 45°.

Brand gradients here that combine orange and purple include ones inspired by Instagram. Every gradient below copies as CSS, Tailwind or a Figma token in one click.

Start a orange & purple gradient in the generator, or see every orange and purple gradient on its own.