Colormapped
CSS gradient

Rainbow Gradient

A six-stop rainbow gradient moving through red, orange, yellow, green, blue, and violet.

A decorative spectrum gradient. Avoid placing essential text across the full gradient without checking contrast over every region.

A rainbow gradient is inherently multi-hue. It is most useful as decoration, data-adjacent color, or artwork—not as a single dependable text background.

Gradient stops

Red #FF3B30 0%
Orange #FF9500 20%
Yellow #FFD60A 38%
Green #34C759 56%
Blue #0A84FF 76%
Violet #AF52DE 100%

CSS

.example {
  background: linear-gradient(90deg, #FF3B30 0%, #FF9500 20%, #FFD60A 38%, #34C759 56%, #0A84FF 76%, #AF52DE 100%);
}

Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.

Angle previews

90°
180°

Ready-to-use variations

Soft spectrum

Lower-intensity spectrum for broad backgrounds.

linear-gradient(90deg, #FCA5A5 0%, #FCD34D 25%, #86EFAC 50%, #93C5FD 75%, #C4B5FD 100%)

Vivid spectrum

Saturated decorative spectrum.

linear-gradient(90deg, #EF4444 0%, #F97316 20%, #EAB308 38%, #22C55E 56%, #3B82F6 76%, #A855F7 100%)

Diagonal spectrum

Five-stop diagonal version for hero accents.

linear-gradient(135deg, #F43F5E 0%, #F59E0B 25%, #10B981 50%, #0EA5E9 75%, #8B5CF6 100%)

Tuning tips

  • Avoid placing long text directly across the full spectrum.
  • Use fewer stops when the gradient should support content rather than become the content.
  • For status meaning, do not rely on spectrum position alone.

Blue Purple Gradient

A blue-to-purple gradient moving from saturated blue through indigo to violet.

Blue Gradient

A three-stop blue gradient from pale sky blue through vivid blue to deep navy.

Green Gradient

A green gradient moving from light mint through emerald to deep forest green.

Browse all palettes and gradients.