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.

Swirl · Sunset Silk1080 × 1920
A slow swirl through the silk

Gradient Wallpaper Maker examples

Sunset Silk silk gradient background, classic shape
Silk gradient: Classic, Sunset Silk
Sunset Sand stripe gradient background, flow shape
Stripe gradient: Flow, Sunset Sand
Sunrise bloom gradient background, rise shape
Bloom gradient: Rise, Sunrise
Tangerine gradient sphere background, marble shape
Gradient sphere: Marble, Tangerine
Citrus Coral silk gradient background, classic shape
Silk gradient: Classic, Citrus Coral
Payments stripe gradient background, flow shape
Stripe gradient: Flow, Payments
Dusk bloom gradient background, rise shape
Bloom gradient: Rise, Dusk
Lavender gradient sphere background, marble shape
Gradient sphere: Marble, Lavender
Amber Rose silk gradient background, classic shape
Silk gradient: Classic, Amber Rose
Lagoon stripe gradient background, flow shape
Stripe gradient: Flow, Lagoon
Dusk bloom gradient background, sunset shape
Bloom gradient: Sunset, Dusk
Coral gradient sphere background, marble shape
Gradient sphere: Marble, Coral
Lilac Mint silk gradient background, classic shape
Silk gradient: Classic, Lilac Mint
Sorbet stripe gradient background, flow shape
Stripe gradient: Flow, Sorbet
Sky gradient sphere background, marble shape
Gradient sphere: Marble, Sky

Templates with this gradient

Animated gradient hero background without text previewAnimated gradient hero background without textAnimated gradient background in cool infrared colours previewAnimated gradient background in cool infrared coloursIridescent gradient background for SaaS previewIridescent gradient background for SaaSAurora gradient hero background for SaaS previewAurora gradient hero background for SaaSAnimated plasma gradient background for SaaS previewAnimated plasma gradient background for SaaS

Gradient backgrounds by colour

PurplePinkBlueOrangeGreenDarkPastelRainbow

Other animated gradient styles

Stripe Gradient Background previewStripe Gradient BackgroundGlow Gradient Background previewGlow Gradient BackgroundAI Orb Animation previewAI Orb AnimationWave Gradient Background previewWave Gradient BackgroundSilk Gradient Background previewSilk Gradient BackgroundGradient Sphere previewGradient SphereBloom Gradient previewBloom GradientWatercolor Gradient Background previewWatercolor Gradient BackgroundRibbon Gradient Background previewRibbon Gradient BackgroundLiquid Gradient Background previewLiquid Gradient Background

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.

Gradient Wallpaper Maker example: an animated gradient made with the BrowserMoon generator
Gradient Wallpaper Maker: example

Show it off: put your gradient on a 3D laptop mockup

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.

How to make an animated gradient background

  1. Pick a shape or style.
  2. Pick your colours.
  3. Set the speed, flow and grain until it feels right.
  4. Pick a size: hero, square, social post, story, banner or card.
  5. Download a PNG or video loop, or copy the embed code into your site, Framer, Webflow, Bolt, Lovable or Claude Code.

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.

Narrow it down

All animated gradientsStripe gradientGlow gradientAI orbWave gradientSilk gradientGradient sphereBloom gradientWatercolor gradientRibbon gradientLiquid gradientMesh Gradient GeneratorGrainy Gradient GeneratorPurple Gradient BackgroundPink Gradient BackgroundBlue Gradient BackgroundOrange Gradient BackgroundGreen Gradient BackgroundDark Gradient BackgroundPastel Gradient BackgroundRainbow Gradient BackgroundAnimated gradient section templatesGradient orb templatesProduct launch video templatesFree app icon and favicon generatorFree 3D laptop mockup generatorAnimated gradient hero templatesHero section templatesSaaS landing page templatesPricing page templatesLanding page templatesAI app templates

Works with any vibe coding tool

LovableBoltReplitClaude CodeChatGPT CodexCursorFramerv0WindsurfGitHub CopilotGemini CLIGoogle AntigravityGoogle StitchKiroCline
What is vibe coding?SaaS templatesSaaS landing page templates

Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.