CSS Gradient
Rainbow Gradient
Celebrate the full spectrum with this rainbow gradient. Red flows through orange, yellow, green, blue, and indigo to violet, creating a joyful, inclusive backdrop. Use it for pride events, creative portfolios, color-themed products, and any design that should feel celebratory and diverse.
background: linear-gradient(90deg, #ff0000 0%, #ff8800 17%, #ffff00 33%, #00ff00 50%, #0088ff 67%, #0000ff 83%, #8800ff 100%);Color Stops
Frequently Asked Questions
›How many colors are in a rainbow?
The traditional rainbow has seven colors: red, orange, yellow, green, blue, indigo, and violet (ROYGBIV). In practice, a smooth rainbow gradient uses six to eight stops for a natural transition.
›How do I create a conic rainbow gradient?
Use: background: conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #0000ff, #8800ff, #ff0000). The conic type creates a circular rainbow.
›How do I make the rainbow gradient animate?
Apply the gradient with background-size: 200% and animate background-position from 0% to 100% using CSS keyframes. Use hue-rotate() filter for a simpler approach.