Rainbow CSS Gradient Generator
A full-spectrum rainbow CSS gradient that runs red, orange, yellow, green, blue and violet across the frame. Bold and playful, it suits pride, creative and kids-focused designs. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.
About the rainbow gradient
A rainbow gradient walks the whole color wheel, so it needs several evenly spaced stops from red through violet to look balanced. This preset lays out six colors so the spectrum reads clearly rather than muddying at the seams. Switch it to a conic gradient in the generator for a color-wheel effect, or keep it linear for a banner sweep. Interpolate in OKLCH for the smoothest hand-off between hues, then copy the CSS or Tailwind v4 export.
The CSS for this gradient:
background: linear-gradient(in oklch 90deg, #ef4444 0%, #f97316 20%, #eab308 40%, #22c55e 60%, #3b82f6 80%, #8b5cf6 100%);
Frequently Asked Questions
Use six or more evenly spaced stops from red through violet in a linear-gradient, for example red, orange, yellow, green, blue, violet. Start from the preset above and copy the CSS, or switch to a conic gradient for a color wheel.
Set the gradient type to conic in the generator and keep the rainbow stops. A conic-gradient sweeps the colors around a center point, which produces the classic color-wheel look instead of a straight band.