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.
Ribbon Gradient Background examples
Templates with this gradient
Other animated gradient styles
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.
Show it off: put your gradient on a 3D laptop mockup
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.
How to make an animated gradient background
- Pick a shape or style.
- Pick your colours.
- Set the speed, flow and grain until it feels right.
- Pick a size: hero, square, social post, story, banner or card.
- Download a PNG or video loop, or copy the embed code into your site, Framer, Webflow, Bolt, Lovable or Claude Code.
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.
Narrow it down
Works with any vibe coding tool
Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.