How do I add a third colour stop to a CSS gradient?

Add the third colour with its position between the existing stops: background: linear-gradient(135deg, red 0%, yellow 50%, green 100%). The position can be any percentage or length value.

Where should I place the middle stop for the best look?

At 50% for equal distribution. Moving it left (e.g. 30%) makes the first colour dominate; moving it right (e.g. 70%) makes the last colour dominate.

Can three colour stops create a sunset or rainbow effect?

Yes. For a sunset: gradient from deep orange (0%) through pink (50%) to purple (100%). For a rainbow effect, use more stops (you are not limited to three).

What if two adjacent colour stops are too similar?

The transition between similar colours may be too subtle to see. Increase the contrast between stops or move them further apart in the colour spectrum.

Can I use opacity in a three-colour gradient?

Yes. Use rgba() or hsla() colour values with alpha values less than 1 for any stop to introduce transparency into the gradient.

Browse tools

Free · Fast · Privacy-first

Three-Color CSS Gradient Generator

Three-colour gradients allow for richer colour transitions — sunrise effects, rainbow sections, or carefully controlled multi-hue backgrounds. FixTools generates the CSS for any three-stop gradient with configurable positions and direction.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Three colour stops with configurable positions

🔒

Middle stop adjustable from 0% to 100%

✨

Supports linear and radial gradient types

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Set three colour stops. Example output: background: linear-gradient(135deg, #667eea 0%, #f093fb 50%, #f5576c 100%)

How It Works

Step-by-step guide to three-color css gradient generator:

1
Add three colour stops
Open the gradient generator. Add a third colour stop by clicking the "Add Stop" button. You should now have stops at 0%, a middle position, and 100%.
2
Set middle stop position
Drag or type the position of the middle colour stop. 50% creates a centred transition; moving it left or right shifts the colour bias.
3
Choose direction
Set the gradient direction. Diagonal angles (135deg, 45deg) often look best with three-colour gradients.
4
Preview and adjust
Use the live preview to see how the three colours blend together. Adjust any stop's colour or position until the gradient looks right.
5
Copy the CSS
Copy background: linear-gradient(angle, color1 0%, color2 X%, color3 100%) from the output panel.