Red & Purple Gradients

About red & purple gradients

Red and purple are one step apart on the wheel, with pink between them, and a straight blend passes through pink on the way. That middle colour is what makes these gradients look rich rather than flat — heat and urgency on one side, creativity and a premium feel on the other.

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 25 gradients is 225°.

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

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