Yellow & Blue Gradients
Gradients that bring yellow and blue together — bold contrasts from across the wheel.
Yellow & Blue gradients
12 gradientsAfterglow Cobalt
Synth Cobalt
Honey Indigo
Monsoon Mimosa
Daffodil Monsoon
Delft Mimosa
Daffodil Sapphire
Sky Mimosa
Butter Delft
Opa
Horizon
About yellow & blue gradients
Yellow and blue come from different sides of the colour wheel, so this is a contrast pairing rather than a blend: brightness and optimism against trust and focus. 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 135deg, #FACC15, #3B82F6) keeps the middle bright in current browsers. The most common angle across these 12 gradients is 135°.
Start a yellow & blue gradient in the generator, or see every yellow and blue gradient on its own.