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.

How To create the Stripe Website Gradient Effect →

About the author

Bramus is a Freelance Web Developer from Belgium. 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. Required fields are marked *

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