Orange & Green Gradients

About orange & green gradients

Orange and green are one step apart on the wheel, with yellow between them, and a straight blend passes through yellow on the way. That middle colour is what makes these gradients look rich rather than flat — warmth and appetite on one side, freshness and growth 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 10 gradients is 135°.

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

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