# Gradient Wallpaper Maker

Make a gradient wallpaper for your phone, desktop or Mac. Pick a shape and colours, choose 9:16 or 16:9, and download.

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

A gradient wallpaper is a background of smooth, blended colour for your phone or computer screen. This gradient wallpaper maker uses the same live gradients as the rest of BrowserMoon: silky folds, soft mesh colour and glowing shapes. Pick a shape and colours, choose Story 9:16 for a phone or Hero 16:9 for a desktop or laptop, and download it.

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

- **Phone wallpapers:** Story 9:16 fits an iPhone or Android lock screen. Swirl and Marble look striking behind the clock.
- **Desktop and Mac wallpapers:** Hero 16:9 fits a laptop or monitor. Classic and Drift are calm enough for a desktop full of windows.
- **Live wallpapers:** Save a short video loop and set it as a live or animated wallpaper on phones and apps that support video.

## Silk, mesh and glow wallpapers

Silk shapes look like light on fabric, mesh gradients blend colour in every direction, and glow shapes put one bright shape on a calm background. All of them work as a wallpaper.

## Grainy or smooth

Turn the Grain slider up for a printed, film-like texture, or set it to 0% for a perfectly smooth wallpaper.

## Frequently asked questions

### What size should a phone wallpaper be?

Use Story 9:16, which saves at 1080 × 1920. It fits most iPhone and Android screens and is cropped cleanly by the lock screen.

### What size should a desktop wallpaper be?

Use Hero 16:9, which saves at 1920 × 1080 and fits laptops and most monitors.

### Can I make an animated gradient wallpaper?

Yes. Save a video loop and use it as a live wallpaper on devices and apps that support video wallpapers.

### Can I make an aesthetic gradient wallpaper?

Yes. Pastel colour sets with the grain turned up give the soft, aesthetic look that is popular for phone wallpapers. Pick Swirl or Bloom for more movement.

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

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