Pastel Gradient Background

Soft pastel gradient backgrounds in pink, lilac, mint and peach. Pick a style, preview it live and download a PNG, video or embed code.

Haze · Sorbet1920 × 1080
Dreamy, heaviest blur

Pastel Gradient Background examples

Lilac Mint glow gradient background, hero curve shape
Glow gradient: Hero curve, Lilac Mint
Bloom wave gradient background, crescendo shape
Wave gradient: Crescendo, Bloom
Lilac Mint silk gradient background, classic shape
Silk gradient: Classic, Lilac Mint
Lavender gradient sphere background, marble shape
Gradient sphere: Marble, Lavender
Sunrise bloom gradient background, rise shape
Bloom gradient: Rise, Sunrise
Warm paper watercolor gradient background, apricot shape
Watercolor gradient: Apricot, Warm paper
Bloom ai orb background, eclipse shape
AI orb: Eclipse, Bloom
Mint glow gradient background, hero curve shape
Glow gradient: Hero curve, Mint
Lilac Mint silk gradient background, drift shape
Silk gradient: Drift, Lilac Mint
Lavender gradient sphere background, pair shape
Gradient sphere: Pair, Lavender
Bloom ai orb background, ripple shape
AI orb: Ripple, Bloom
Citrus Coral glow gradient background, corner shape
Glow gradient: Corner, Citrus Coral
Lilac Mint silk gradient background, bloom shape
Silk gradient: Bloom, Lilac Mint
Tangerine gradient sphere background, orbit shape
Gradient sphere: Orbit, Tangerine
Bloom ai orb background, bokeh shape
AI orb: Bokeh, Bloom
Lilac Mint glow gradient background, low corner shape
Glow gradient: Low corner, Lilac Mint
Lilac Mint silk gradient background, tide shape
Silk gradient: Tide, Lilac Mint
Coral gradient sphere background, orbit shape
Gradient sphere: Orbit, Coral
Bloom ai orb background, vortex shape
AI orb: Vortex, Bloom

Templates with this gradient

Animated mesh gradient background for SaaS previewAnimated mesh gradient background for SaaSAurora gradient hero background for SaaS previewAurora gradient hero background for SaaSAnimated gradient hero section with a centred logo previewAnimated gradient hero section with a centred logoHero section with animated gradient orbs previewHero section with animated gradient orbsAnimated gradient orb template in 8 colours previewAnimated gradient orb template in 8 coloursAnimated gradient background in cool infrared colours previewAnimated gradient background in cool infrared coloursGradient stripe hero template for SaaS previewGradient stripe hero template for SaaSAI loading animation with a sunrise glow previewAI loading animation with a sunrise glow

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

Pastel gradients are soft, light and calm: pale pink, lilac, mint, sky and peach melting into each other. They are popular for aesthetic wallpapers, wellness apps and friendly brands, and they keep dark text easy to read. These pastel gradient backgrounds come in mesh, glow, silk and watercolor styles.

Pastel Gradient Background example: an animated gradient made with the BrowserMoon generator
Pastel Gradient Background: example

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

Where to use it

Wellness and lifestyle apps

Soft pastel colour feels calm and kind behind an app screen or sign up form.

Aesthetic wallpapers

Save a 9:16 PNG with a little grain for a soft phone wallpaper.

Content-heavy pages

Pastels are light enough to sit behind text, cards and forms.

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.

Blush, lilac and mint

Sorbet is pastel pink and peach, Lilac Mint is soft lilac and green, and the watercolor papers keep everything light and airy.

Frequently asked questions

What is a pastel gradient background?

A pastel gradient background is a background where pastel tones blend smoothly into each other, often with a second colour mixed in. It adds colour and depth to a page without a photo.

What are pastel colours?

Pastel colours are pale, soft versions of a colour, made by mixing it with a lot of white: blush pink, lilac, mint, baby blue and peach.

How do I make an aesthetic pastel gradient?

Pick a pastel colour set such as Sorbet or Lilac Mint, choose a soft style like Haze or Drift, and add a little grain.

How do I make a pastel gradient background?

Pick a style above, choose one of the pastel colour sets, and set the speed and grain. Then download a PNG or video, or copy the embed code into your website.

How do I add it to my website?

Copy the embed code and paste it where the background should go. It is one HTML block with a small script and works in plain HTML, Framer, Webflow, WordPress and code from Bolt, Lovable, Cursor or Claude Code. You can also download a PNG or a video loop and use it as a background image or video.

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 GeneratorGradient Wallpaper MakerPurple Gradient BackgroundPink Gradient BackgroundBlue Gradient BackgroundOrange Gradient BackgroundGreen Gradient BackgroundDark 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.