How To create the Stripe Website Gradient Effect

Kevin Hufnagl reverse engineered Stripe’s Website Gradient Effect. Here’s what he found on the JavaScript side of things:

Essentially they are using a minimalistic implementation of WebGL which they called minigl and a Gradient Class which is used to store all of our animation properties and control the animation.

See the Pen
Stripe Website Gradient Animation
by Kevin Hufnagl (@kevinhufnagl)
on CodePen.

Update 2021.10.17: The original Pen above seems to have been removed, so here’s a restored version for you to check out:

See the Pen
MiniGL Stripe Gradient
by Bramus (@bramus)
on CodePen.

Update 2021.10.25: On https://whatamesh.vercel.app/ you can easily generate your own gradients. Exporting the code is also possible. It uses the same code as the pen in the update above. Only difference is that it loads the Gradient code using ES Modules.

See the Pen
Whatamesh — Stripe WebGL Gradient
by Bramus (@bramus)
on CodePen.

☝️ There’s no need to download your own gradient.js, as you can serve it directly from the GitHub Gist via GitHack.

How To create the Stripe Website Gradient Effect →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.