Green & Blue Gradients

About green & blue gradients

Green and blue are one step apart on the wheel, with teal between them, and a straight blend passes through teal on the way. That middle colour is what makes these gradients look rich rather than flat — freshness and growth on one side, trust and focus 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 11 gradients is 135°.

Brand gradients here that combine green and blue include ones inspired by Google and Vue. Every gradient below copies as CSS, Tailwind or a Figma token in one click.

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