Rainbow Gradient Background

Colourful, multicolour gradient backgrounds with many hues. Pick a style, preview it live and download a PNG, video or embed code.

Flow · Payments1920 × 1080
Vivid melt, no streaks

Rainbow Gradient Background examples

Sand Sunset wave gradient background, classic shape
Wave gradient: Classic, Sand Sunset
Sand Sunset ai orb background, binary shape
AI orb: Binary, Sand Sunset
Lagoon silk gradient background, classic shape
Silk gradient: Classic, Lagoon
Aurora liquid gradient background, liquid shape
Liquid gradient: Liquid, Aurora
Aurora ribbon gradient background, wide ribbon shape
Ribbon gradient: Wide ribbon, Aurora
Ink stripe gradient background, flow shape
Stripe gradient: Flow, Ink
Citrus Coral glow gradient background, edge ring shape
Glow gradient: Edge ring, Citrus Coral
Sand Sunset wave gradient background, pulse shape
Wave gradient: Pulse, Sand Sunset
Sand Sunset ai orb background, sunrise shape
AI orb: Sunrise, Sand Sunset
Lagoon silk gradient background, drift shape
Silk gradient: Drift, Lagoon
Sunset liquid gradient background, liquid shape
Liquid gradient: Liquid, Sunset
Sunset ribbon gradient background, ribbon shape
Ribbon gradient: Ribbon, Sunset
Payments stripe gradient background, flow shape
Stripe gradient: Flow, Payments
Mint glow gradient background, edge ring shape
Glow gradient: Edge ring, Mint
Sand Sunset wave gradient background, horizon shape
Wave gradient: Horizon, Sand Sunset
Citrus Coral silk gradient background, tide shape
Silk gradient: Tide, Citrus Coral
Thermal liquid gradient background, liquid shape
Liquid gradient: Liquid, Thermal
Aurora ribbon gradient background, ribbon shape
Ribbon gradient: Ribbon, Aurora
Payments stripe gradient background, surge shape
Stripe gradient: Surge, Payments
Mint glow gradient background, progress shape
Glow gradient: Progress, Mint
Lagoon silk gradient background, swirl shape
Silk gradient: Swirl, Lagoon
Sunset liquid gradient background, slow pour shape
Liquid gradient: Slow pour, Sunset
Sunset ribbon gradient background, wide ribbon shape
Ribbon gradient: Wide ribbon, Sunset
Payments stripe gradient background, organic shape
Stripe gradient: Organic, Payments

Templates with this gradient

Animated mesh gradient background for SaaS previewAnimated mesh gradient background for SaaSAurora gradient hero background for SaaS previewAurora gradient hero background for SaaSAnimated gradient hero section with a centred logo previewAnimated gradient hero section with a centred logoHero section with animated gradient orbs previewHero section with animated gradient orbsAnimated gradient orb template in 8 colours previewAnimated gradient orb template in 8 coloursAnimated gradient background in cool infrared colours previewAnimated gradient background in cool infrared coloursGradient stripe hero template for SaaS previewGradient stripe hero template for SaaSAI loading animation with a sunrise glow previewAI loading animation with a sunrise glow

Gradient backgrounds by colour

PurplePinkBlueOrangeGreenDarkPastelRainbow

Other animated gradient styles

Stripe Gradient Background previewStripe Gradient BackgroundGlow Gradient Background previewGlow Gradient BackgroundAI Orb Animation previewAI Orb AnimationWave Gradient Background previewWave Gradient BackgroundSilk Gradient Background previewSilk Gradient BackgroundGradient Sphere previewGradient SphereBloom Gradient previewBloom GradientWatercolor Gradient Background previewWatercolor Gradient BackgroundRibbon Gradient Background previewRibbon Gradient BackgroundLiquid Gradient Background previewLiquid Gradient Background

A rainbow gradient blends many colours at once: pink into orange into gold, green and blue. It is bold and joyful, and it suits creative tools, events and any brand that wants to feel colourful. These multicolour gradient backgrounds use mesh, silk and glow styles that mix four or more colours, and they all move.

Rainbow Gradient Background example: an animated gradient made with the BrowserMoon generator
Rainbow Gradient Background: example

Show it off: put your gradient on a 3D laptop mockup

Where to use it

Creative tools and communities

A colourful mesh says playful and creative at first glance.

Events and launches

Rainbow gradients stand out on event pages, posters and launch posts.

Holographic and iridescent looks

Silk and sphere colour sets give a shiny, holographic multicolour finish.

How to make an animated gradient background

  1. Pick a shape or style.
  2. Pick your colours.
  3. Set the speed, flow and grain until it feels right.
  4. Pick a size: hero, square, social post, story, banner or card.
  5. Download a PNG or video loop, or copy the embed code into your site, Framer, Webflow, Bolt, Lovable or Claude Code.

Many colours at once

Payments mixes magenta, blue and gold, Citrus Coral mixes lime, coral and magenta, and several silk and sphere colour sets blend five colours or more.

Frequently asked questions

What is a rainbow gradient background?

A rainbow gradient background is a background where rainbow tones blend smoothly into each other, often with a second colour mixed in. It adds colour and depth to a page without a photo.

How do I keep a rainbow gradient readable?

Use it in a hero or a band, keep the text on a solid button or card, and choose a softer style like Drift so the colours do not compete with the words.

What is a holographic gradient?

A holographic or iridescent gradient shifts through many colours like the surface of a soap bubble. The silk and sphere styles here give that look.

How do I make a rainbow gradient background?

Pick a style above, choose one of the rainbow colour sets, and set the speed and grain. Then download a PNG or video, or copy the embed code into your website.

How do I add it to my website?

Copy the embed code and paste it where the background should go. It is one HTML block with a small script and works in plain HTML, Framer, Webflow, WordPress and code from Bolt, Lovable, Cursor or Claude Code. You can also download a PNG or a video loop and use it as a background image or video.

Is it free?

You can make and preview every gradient for free in your browser, with no sign up. PNG, video and embed code downloads come with a BrowserMoon licence, and licensed files have no watermark.

Narrow it down

All animated gradientsStripe gradientGlow gradientAI orbWave gradientSilk gradientGradient sphereBloom gradientWatercolor gradientRibbon gradientLiquid gradientMesh Gradient GeneratorGrainy Gradient GeneratorGradient Wallpaper MakerPurple Gradient BackgroundPink Gradient BackgroundBlue Gradient BackgroundOrange Gradient BackgroundGreen Gradient BackgroundDark Gradient BackgroundPastel Gradient BackgroundAnimated gradient section templatesGradient orb templatesProduct launch video templatesFree app icon and favicon generatorFree 3D laptop mockup generatorAnimated gradient hero templatesHero section templatesSaaS landing page templatesPricing page templatesLanding page templatesAI app templates

Works with any vibe coding tool

LovableBoltReplitClaude CodeChatGPT CodexCursorFramerv0WindsurfGitHub CopilotGemini CLIGoogle AntigravityGoogle StitchKiroCline
What is vibe coding?SaaS templatesSaaS landing page templates

Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.