What colors are in a rainbow gradient?

The classic run is red, orange, yellow, green, blue and violet, in spectral order. A CSS gradient blends between stops automatically, so six or seven stops are enough; the browser generates every hue in between, the same way the sky does.

How do I make a rainbow gradient in CSS?

Use linear-gradient with the spectrum as stops: background: linear-gradient(90deg, red, orange, yellow, green, blue, violet). Copy CSS on any version above gives you the exact hexes used here instead of the keywords.

Can text sit on a rainbow gradient?

On the full-strength spectrum, barely: contrast changes at every point along the run, so some words will always land on a weak spot. Use the pastel version with dark text, or the deep version with white text, and check the worst-case pair in the contrast checker.

Rainbow gradient

A rainbow gradient runs the full spectrum in one sweep, red through violet, the way a prism spreads white light. It is the loudest background there is, which is exactly why the working versions below include softer ones: the full-strength spectrum is for moments, not for pages of text.

4rainbow gradients, ready to use

The full spectrum here uses seven stops at even spacing, so no single hue dominates the run. The pastel and muted versions keep the same hue order and pull saturation down, which preserves the rainbow reading while letting content sit on top. Horizontal sweeps read as banners; set the angle to 180 for a top to bottom background.

Full spectrum

linear-gradient(90deg, #FF0000, #FF8C00, #FFD700, #00C853, #00D9F5, #0A84FF, #8F00FF)

In the color library: red #FF0000, gold #FFD700

Pastel rainbow

linear-gradient(90deg, #FFB3BA, #FFDFBA, #FFFFBA, #BAFFC9, #BAE1FF, #E5D4FF)

The same hue order with the saturation pulled down, so dark text stays readable along the whole run.

Deep spectrum

linear-gradient(90deg, #800000, #B34700, #8B6914, #0F5132, #0F52BA, #4B0082)

Every stop darkened toward its shade, for white text and darker interfaces.

In the color library: maroon #800000, indigo #4B0082

Neon arc

linear-gradient(135deg, #FF2965, #FCFF52, #00F5D4, #00A3FF, #FF00E5)

Common questions

What colors are in a rainbow gradient?: The classic run is red, orange, yellow, green, blue and violet, in spectral order. A CSS gradient blends between stops automatically, so six or seven stops are enough; the browser generates every hue in between, the same way the sky does.
How do I make a rainbow gradient in CSS?: Use linear-gradient with the spectrum as stops: background: linear-gradient(90deg, red, orange, yellow, green, blue, violet). Copy CSS on any version above gives you the exact hexes used here instead of the keywords.
Can text sit on a rainbow gradient?: On the full-strength spectrum, barely: contrast changes at every point along the run, so some words will always land on a weak spot. Use the pastel version with dark text, or the deep version with white text, and check the worst-case pair in the contrast checker.