Stripe Gradient Background
Make a Stripe gradient background for your website in seconds. Soft, moving mesh gradient colours like the Stripe homepage, in 9 animated styles and 5 colour sets. Download a PNG, a video loop or copy the embed code.
Other animated gradient styles
A Stripe gradient is the soft, liquid, slowly moving mesh of colour made famous by the Stripe homepage. Colours melt into each other, drift and fold, and the whole background feels alive without distracting from the headline. Pick a style, pick your colours and you have a Stripe-style gradient background ready for your hero section.
Where to use it
SaaS and fintech hero sections
Flow and Drift give the classic Stripe-style melt. Put your headline on top and keep the CTA in a solid button so it stands out from the colour.
Launch pages and waitlists
Current and Surge move faster and feel more energetic, which suits a launch page with one big message.
Dark landing pages
The Ink colour set puts electric pink and cyan on deep navy for developer tools and dark-mode sites.
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 the Stripe gradient?
The Stripe gradient is the animated mesh gradient on the Stripe homepage: several bright colours that blend, drift and fold into each other in slow motion. It is drawn live with WebGL, which is why it stays smooth and sharp.
How do I make a Stripe gradient background?
Choose a style such as Flow or Drift, pick the Payments colour set for the classic magenta, blue and gold mix, then copy the embed code or download a video. No coding or WebGL knowledge needed.
How do I add a Stripe-style gradient 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.
Is this the official Stripe gradient?
No. This is an original Stripe-style gradient made by BrowserMoon. It has the same soft, animated look but its own code and colours. BrowserMoon is not affiliated with Stripe.
Can I change the Stripe gradient colours?
Yes. Switch between five colour sets: Payments, Sunset Sand, Lagoon, Sorbet and Ink.
Narrow it down
Works with any vibe coding tool
Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.