Yellow & Purple Gradients
Gradients that bring yellow and purple together — bold contrasts from across the wheel.
Yellow & Purple gradients
8 gradientsStatic Citron
Mimosa Iris
Wisteria Daffodil
Butter Orchid
Grape Pollen
Daffodil Aubergine
Aubergine Butter
Citron Plum
About yellow & purple gradients
Yellow and purple come from opposite sides of the colour wheel, so this is a contrast pairing rather than a blend: brightness and optimism 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 225deg, #FACC15, #8B5CF6) keeps the middle bright in current browsers. The most common angle across these 8 gradients is 225°.
Start a yellow & purple gradient in the generator, or see every yellow and purple gradient on its own.