Discover beautiful rainbow gradient backgrounds perfect for vibrant, colorful web designs. Rainbow gradients create energetic, joyful looks ideal for creative projects, celebrations, and eye-catching designs.
Explore our collection of beautiful rainbow gradient backgrounds. Get free Tailwind and CSS gradient code examples for each gradient.
#ff0000
#ff7f00
#ffff00
#00ff00
#0000ff
#4b0082
#9400d3
CSS
linear-gradient(90deg, #ff0000 0%, #ff7f00 16.66%, #ffff00 33.33%, #00ff00 50%, #0000ff 66.66%, #4b0082 83.33%, #9400d3 100%)
Tailwind
bg-gradient-to-b from-red-800 to-purple-700
#ff0080
#ff8c00
#ffd700
#32cd32
#00bfff
#8a2be2
CSS
linear-gradient(135deg, #ff0080 0%, #ff8c00 20%, #ffd700 40%, #32cd32 60%, #00bfff 80%, #8a2be2 100%)
Tailwind
bg-gradient-to-bl from-pink-700 to-purple-700
#ffb3ba
#ffdfba
#ffffba
#baffc9
#bae1ff
#e0baff
CSS
linear-gradient(180deg, #ffb3ba 0%, #ffdfba 20%, #ffffba 40%, #baffc9 60%, #bae1ff 80%, #e0baff 100%)
Tailwind
bg-gradient-to-l from-red-500 to-purple-500
#ff006e
#fb5607
#ffbe0b
#06ffa5
#118ab2
#8338ec
#ff006e
CSS
linear-gradient(45deg, #ff006e 0%, #fb5607 16.66%, #ffbe0b 33.33%, #06ffa5 50%, #118ab2 66.66%, #8338ec 83.33%, #ff006e 100%)
Tailwind
bg-gradient-to-br from-pink-700 to-pink-700
#ff0844
#ffb199
#ffeaa7
#74b9ff
#a29bfe
CSS
linear-gradient(90deg, #ff0844 0%, #ffb199 25%, #ffeaa7 50%, #74b9ff 75%, #a29bfe 100%)
Tailwind
bg-gradient-to-b from-pink-700 to-blue-600
#ff6b6b
#ffa07a
#ffd93d
#6bcf7f
#4d96ff
#9b59b6
CSS
linear-gradient(135deg, #ff6b6b 0%, #ffa07a 20%, #ffd93d 40%, #6bcf7f 60%, #4d96ff 80%, #9b59b6 100%)
Tailwind
bg-gradient-to-bl from-red-600 to-purple-700
#ff006e
#8338ec
#3a86ff
#06ffa5
#ffbe0b
CSS
linear-gradient(180deg, #ff006e 0%, #8338ec 25%, #3a86ff 50%, #06ffa5 75%, #ffbe0b 100%)
Tailwind
bg-gradient-to-l from-pink-700 to-orange-600
#e63946
#f77f00
#fcbf49
#06a77d
#118ab2
#073b4c
#7209b7
#e63946
CSS
linear-gradient(45deg, #e63946 0%, #f77f00 14.28%, #fcbf49 28.57%, #06a77d 42.85%, #118ab2 57.14%, #073b4c 71.42%, #7209b7 85.71%, #e63946 100%)
Tailwind
bg-gradient-to-br from-pink-700 to-pink-700
#ff9a9e
#fecfef
#fecfef
#a8edea
#fed6e3
#ff9a9e
CSS
linear-gradient(90deg, #ff9a9e 0%, #fecfef 20%, #fecfef 40%, #a8edea 60%, #fed6e3 80%, #ff9a9e 100%)
Tailwind
bg-gradient-to-b from-red-600 to-red-600
#ff0080
#ff8c00
#ffd700
#00ff00
#00ffff
#0000ff
#ff00ff
CSS
linear-gradient(135deg, #ff0080 0%, #ff8c00 16.66%, #ffd700 33.33%, #00ff00 50%, #00ffff 66.66%, #0000ff 83.33%, #ff00ff 100%)
Tailwind
bg-gradient-to-bl from-pink-700 to-fuchsia-600
#ff006e
#8338ec
#3a86ff
#06ffa5
#ffbe0b
#fb5607
CSS
linear-gradient(180deg, #ff006e 0%, #8338ec 20%, #3a86ff 40%, #06ffa5 60%, #ffbe0b 80%, #fb5607 100%)
Tailwind
bg-gradient-to-l from-pink-700 to-orange-700
#ff6b6b
#ffa07a
#ffd93d
#6bcf7f
#4d96ff
#9b59b6
#ff6b6b
CSS
linear-gradient(45deg, #ff6b6b 0%, #ffa07a 16.66%, #ffd93d 33.33%, #6bcf7f 50%, #4d96ff 66.66%, #9b59b6 83.33%, #ff6b6b 100%)
Tailwind
bg-gradient-to-br from-red-600 to-red-600
#ff0844
#ffb199
#ffeaa7
#74b9ff
#a29bfe
#fd79a8
#ff0844
#ffb199
CSS
linear-gradient(90deg, #ff0844 0%, #ffb199 14.28%, #ffeaa7 28.57%, #74b9ff 42.85%, #a29bfe 57.14%, #fd79a8 71.42%, #ff0844 85.71%, #ffb199 100%)
Tailwind
bg-gradient-to-b from-pink-700 to-red-600
#ff0000
#ff7f00
#ffff00
#00ff00
#0000ff
#9400d3
CSS
linear-gradient(135deg, #ff0000 0%, #ff7f00 20%, #ffff00 40%, #00ff00 60%, #0000ff 80%, #9400d3 100%)
Tailwind
bg-gradient-to-bl from-red-800 to-purple-700
#ff006e
#8338ec
#3a86ff
#06ffa5
#ffbe0b
CSS
linear-gradient(180deg, #ff006e 0%, #8338ec 25%, #3a86ff 50%, #06ffa5 75%, #ffbe0b 100%)
Tailwind
bg-gradient-to-l from-pink-700 to-orange-600
#ff0000
#ff7f00
#ffff00
#00ff00
#0000ff
#4b0082
#9400d3
CSS
radial-gradient(circle, #ff0000 0%, #ff7f00 16.66%, #ffff00 33.33%, #00ff00 50%, #0000ff 66.66%, #4b0082 83.33%, #9400d3 100%)
Tailwind
bg-[radial-gradient(circle, #ff0000 0%, #ff7f00 16.66%, #ffff00 33.33%, #00ff00 50%, #0000ff 66.66%, #4b0082 83.33%, #9400d3 100%)]
#ff0000
#ff7f00
#ffff00
#00ff00
#0000ff
#4b0082
#9400d3
#ff0000
CSS
conic-gradient(from 0deg, #ff0000 0%, #ff7f00 14.28%, #ffff00 28.57%, #00ff00 42.85%, #0000ff 57.14%, #4b0082 71.42%, #9400d3 85.71%, #ff0000 100%)
Tailwind
bg-[conic-gradient(from 0deg, #ff0000 0%, #ff7f00 14.28%, #ffff00 28.57%, #00ff00 42.85%, #0000ff 57.14%, #4b0082 71.42%, #9400d3 85.71%, #ff0000 100%)]
#ff6b6b
#ffa07a
#ffd93d
#6bcf7f
#4d96ff
#9b59b6
#e056fd
#ff6b6b
#ffa07a
CSS
linear-gradient(45deg, #ff6b6b 0%, #ffa07a 12.5%, #ffd93d 25%, #6bcf7f 37.5%, #4d96ff 50%, #9b59b6 62.5%, #e056fd 75%, #ff6b6b 87.5%, #ffa07a 100%)
Tailwind
bg-gradient-to-br from-red-600 to-red-600
#ff0080
#ff8c00
#ffd700
#32cd32
#00bfff
#8a2be2
CSS
linear-gradient(90deg, #ff0080 0%, #ff8c00 20%, #ffd700 40%, #32cd32 60%, #00bfff 80%, #8a2be2 100%)
Tailwind
bg-gradient-to-b from-pink-700 to-purple-700
#ff0844
#ffb199
#ffeaa7
#fdcb6e
#e17055
CSS
linear-gradient(135deg, #ff0844 0%, #ffb199 25%, #ffeaa7 50%, #fdcb6e 75%, #e17055 100%)
Tailwind
bg-gradient-to-bl from-pink-700 to-red-700
#74b9ff
#a29bfe
#fd79a8
#fdcb6e
#e17055
CSS
linear-gradient(180deg, #74b9ff 0%, #a29bfe 25%, #fd79a8 50%, #fdcb6e 75%, #e17055 100%)
Tailwind
bg-gradient-to-l from-cyan-600 to-red-700
#ff006e
#8338ec
#3a86ff
#06ffa5
#ffbe0b
#fb5607
CSS
linear-gradient(45deg, #ff006e 0%, #8338ec 20%, #3a86ff 40%, #06ffa5 60%, #ffbe0b 80%, #fb5607 100%)
Tailwind
bg-gradient-to-br from-pink-700 to-orange-700
#ff9a9e
#fecfef
#fecfef
#a8edea
#fed6e3
#ff9a9e
#fecfef
CSS
linear-gradient(90deg, #ff9a9e 0%, #fecfef 16.66%, #fecfef 33.33%, #a8edea 50%, #fed6e3 66.66%, #ff9a9e 83.33%, #fecfef 100%)
Tailwind
bg-gradient-to-b from-red-600 to-red-400
#ff0000
#ff7f00
#ffff00
#00ff00
#0000ff
CSS
linear-gradient(135deg, #ff0000 0%, #ff7f00 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%)
Tailwind
bg-gradient-to-bl from-red-800 to-blue-800
Rainbow gradient backgrounds are perfect for creating vibrant, colorful web designs. They work exceptionally well for creative projects, celebrations, and eye-catching designs. These gradients typically transition through the full spectrum of colors - from red to orange, yellow, green, blue, indigo, and violet - creating a sense of energy, joy, and creativity.
Use rainbow gradients as background for creative project websites to create an energetic and vibrant first impression.
Apply rainbow gradients to event and celebration pages to create a festive and joyful atmosphere.
Use rainbow gradients on buttons to make them stand out and encourage positive user interaction.
Rainbow gradients work excellently in hero sections, creating a vibrant and eye-catching look.
Discover beautiful gradient backgrounds for different color themes and design styles. Each page provides examples and inspiration for creating stunning gradient backgrounds.
Elegant dark gradients for modern designs
Soft light gradients for clean designs
Professional blue gradients for tech brands
Bold red gradients for energetic designs
Cheerful yellow gradients for positive vibes
Natural green gradients for eco-friendly designs
Sleek black gradients for premium designs
Vibrant orange gradients for creative brands
Playful pink gradients for feminine designs
Want to customize your rainbow gradient? Use our free CSS gradient generator to create unique rainbow gradient backgrounds tailored to your brand and design needs.
Open Gradient GeneratorSubscribe to FrontendGeek Hub for frontend interview preparation, interview experiences, curated resources and roadmaps.
© 2025 FrontendGeek. All rights reserved
