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.