Blue & Purple Gradients
Gradients that bring blue and purple together — smooth blends between neighbouring hues.
Blue & Purple gradients
32 gradients · page 2 of 2About blue & purple gradients
Blue and purple sit side by side on the colour wheel, so a gradient between them stays smooth on its own — every colour on the way is a believable mix of the two. That makes it one of the safest pairings in the library: it reads as one idea, trust and focus shading into creativity and a premium feel.
Because the two hues are close, the angle does most of the work. A straight 90° or 180° sweep reads calm and directional; a diagonal gives a hero or card the most movement. The most common angle across these 32 gradients is 135°.
Brand gradients here that combine blue and purple include ones inspired by Notion, Messenger, Google and Loops. Every gradient below copies as CSS, Tailwind or a Figma token in one click.
Start a blue & purple gradient in the generator, or see every blue and purple gradient on its own.