# Ribbon Gradient Background

Animated ribbon gradients: glossy curved bands of colour that sweep and bend. 6 shapes and 8 colour sets. Download a PNG, a video loop or the embed code.

Page: https://www.browsermoon.com/ribbon-gradient (live animated gradient generator, runs in the browser)

A ribbon gradient is made of many glossy bands of colour that curve across the frame like satin ribbons, wide and soft in one corner and packed tight in the other. Each band catches the light, so the background looks three dimensional and premium. The ribbons move slowly, which makes a hero section feel alive without a video file.

## How it works

1. Pick a shape or style.
2. Pick a colour set.
3. Set speed, flow and grain.
4. Pick a size: hero 16:9, square, post 4:5, story 9:16, banner 3:1 or card.
5. Download a PNG or a video loop, or copy the embed code (one HTML block with a small WebGL script) into a website, Framer, Webflow or an AI coding tool.

Previewing is free. Downloads and embed code come with a BrowserMoon licence and have no watermark.

## Where to use it

- **Bold hero sections:** Ribbon and Fan fill the whole frame with colour. Put your headline on a solid card or in the calm wide corner so it stays readable.
- **Laptop and phone mockup screens:** Ribbon gradients make striking screens in a device mockup. The same set is built into the BrowserMoon laptop mockup generator.
- **Wallpapers and covers:** Save a 16:9 or 9:16 PNG for a desktop or phone wallpaper, a YouTube cover or a launch post.

## Frequently asked questions

### What is a ribbon gradient?

A ribbon gradient is a background of curved, glossy bands of colour that look like satin ribbons. Each band has a soft highlight, so the gradient looks three dimensional.

### Can I animate a ribbon gradient?

Yes. Every ribbon here moves on its own. Use the Speed and Flow sliders to make it calmer or livelier, or pause it and save a still PNG.

### Which colours are there?

Eight colour sets: Sunset, Thermal, Ocean, Cobalt, Aurora, Peach, Acid and Silver. Silver gives a chrome, metallic look.

### Is this the same gradient as the laptop mockup screens?

Yes. The Ribbon screens in the laptop mockup generator use the same colour sets. Here you can animate them, change the shape and download them.

### How do I add a ribbon gradient to my website?

Copy the embed code and paste it where the background should go, or download a PNG or a video loop and use it as a background image or video.

### Will it slow my site down?

No. It is drawn by the graphics card with a small WebGL script, with no video file to load, and it respects reduced motion settings.

## Other gradient pages

- [Stripe Gradient Background](https://www.browsermoon.com/stripe-gradient)
- [Glow Gradient Background](https://www.browsermoon.com/glow-gradient)
- [AI Orb Animation](https://www.browsermoon.com/ai-orb)
- [Wave Gradient Background](https://www.browsermoon.com/wave-gradient)
- [Silk Gradient Background](https://www.browsermoon.com/silk-gradient)
- [Gradient Sphere](https://www.browsermoon.com/gradient-sphere)
- [Bloom Gradient](https://www.browsermoon.com/bloom-gradient)
- [Watercolor Gradient Background](https://www.browsermoon.com/watercolor-gradient)
- [Liquid Gradient Background](https://www.browsermoon.com/liquid-gradient)
- [Mesh Gradient Generator](https://www.browsermoon.com/mesh-gradient)
- [Grainy Gradient Generator](https://www.browsermoon.com/grainy-gradient)
- [Gradient Wallpaper Maker](https://www.browsermoon.com/gradient-wallpaper)
- [Purple Gradient Background](https://www.browsermoon.com/purple-gradient-background)
- [Pink Gradient Background](https://www.browsermoon.com/pink-gradient-background)
- [Blue Gradient Background](https://www.browsermoon.com/blue-gradient-background)
- [Orange Gradient Background](https://www.browsermoon.com/orange-gradient-background)
- [Green Gradient Background](https://www.browsermoon.com/green-gradient-background)
- [Dark Gradient Background](https://www.browsermoon.com/dark-gradient-background)
- [Pastel Gradient Background](https://www.browsermoon.com/pastel-gradient-background)
- [Rainbow Gradient Background](https://www.browsermoon.com/rainbow-gradient-background)

---
BrowserMoon (https://www.browsermoon.com) is a library of 570+ website templates and mobile app screens for people building with AI coding tools (Claude Code, Lovable, Bolt, Replit, Cursor, ChatGPT Codex). Each template is one HTML file you paste into the tool as the reference design. One licence is $349, one time, for unlimited projects. The mockup and gradient generators are free to use in the browser.