Liquid Gradient Background
Animated liquid gradients: wavy stripes of colour that flow like poured paint. 6 shapes and 8 colour sets. Download a PNG, a video loop or the embed code.
Liquid Gradient Background examples
Templates with this gradient
Other animated gradient styles
A liquid gradient looks like paint poured in stripes and gently stirred: wavy, glossy bands of colour that flow side by side. It is bolder than a soft mesh gradient and calmer than a pattern, which makes it a strong background for creative brands, music and launch pages. The stripes keep flowing slowly, or you can pause them for a still.
Show it off: put your gradient on a 3D laptop mockup
Where to use it
Music, creative and fashion brands
Liquid and Twist feel expressive and fluid, which suits creative products and campaigns.
Launch pages and posters
Slow pour gives broad stripes with room for one big message on top.
Phone wallpapers
Switch to Story 9:16 and save a PNG. Liquid stripes look great on a lock screen.
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 liquid gradient?
A liquid gradient is a background of wavy, flowing stripes of colour, like poured or marbled paint. Animated versions keep the stripes moving slowly.
What is the difference between a liquid gradient and a mesh gradient?
A mesh gradient blends colours softly into each other. A liquid gradient keeps distinct, glossy stripes that bend and flow, so it looks bolder and more graphic.
Which colours are there?
Eight colour sets: Sunset, Thermal, Ocean, Cobalt, Aurora, Peach, Acid and Silver.
Is this the same gradient as the laptop mockup screens?
Yes. The Liquid screens in the laptop mockup generator use the same colour sets, and here they move.
How do I add a liquid gradient to my website?
Copy the embed code and paste it where the background should go, or download a PNG or a video loop.
Can I make a liquid gradient wallpaper?
Yes. Pick Story 9:16 for a phone or Hero 16:9 for a desktop and save a PNG.
Narrow it down
Works with any vibe coding tool
Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.