# 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.

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

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.

## 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

- **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.

## 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.

## 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)
- [Ribbon Gradient Background](https://www.browsermoon.com/ribbon-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.