DEV Community

Cover image for How to make animated gradients like Stripe
Jordi Enric
Jordi Enric

Posted on • Updated on

How to make animated gradients like Stripe

Photo by Rafael Leão on Unsplash

Check stripe.com if you don't know what I am talking about.

I'm going to share with you a code snippet to create animated gradient canvas backgrounds.

<!DOCTYPE html>
<html>

<head>
    <title>Gradient</title>
    <meta charset="UTF-8" />

    <style>
        body {
            height: 400px;
            width: 500px;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="32px" height="32px">

        <script>
            const canvas = document.getElementById('canvas');
            const context = canvas.getContext('2d');
            let time = 0;

            const color = function (x, y, r, g, b) {
                context.fillStyle = `rgb(${r}, ${g}, ${b})`
                context.fillRect(x, y, 10, 10);
            }
            const R = function (x, y, time) {
                return (Math.floor(192 + 64 * Math.cos((x * x - y * y) / 300 + time)));
            }

            const G = function (x, y, time) {
                return (Math.floor(192 + 64 * Math.sin((x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300)));
            }

            const B = function (x, y, time) {
                return (Math.floor(192 + 64 * Math.sin(5 * Math.sin(time / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)));
            }

            const startAnimation = function () {
                for (x = 0; x <= 30; x++) {
                    for (y = 0; y <= 30; y++) {
                        color(x, y, R(x, y, time), G(x, y, time), B(x, y, time));
                    }
                }
                time = time + 0.03;
                window.requestAnimationFrame(startAnimation);
            }

            startAnimation();


        </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

It's based on the code from
https://www.html5canvastutorials.com/advanced/html5-canvas-animated-gradient-background/

I just changed some things to make it more readable. Try to play with it to find out how it's doing it. It's really fun and not that hard.

Also if you go to Stripe.com/us and do the Konami Code (up, up, down, down, left, right, left, right, b, a) you will find hidden controls play with the animation.

Follow me on Twitter if you want to see more cool front end stuff :)

Have a good day ✌✌

Top comments (6)

Collapse
 
yaketymatt profile image
Matt Anderson

Thanks for this Jordi, I'll find a use for it on my site Yakety.co.uk. If you check it out, I've done something similar to Stripe, only the gradient moves with your cursor.

Collapse
 
jordienr profile image
Jordi Enric

You're welcome Matt. Looks really clean and cool in your site 😁

Collapse
 
yaketymatt profile image
Matt Anderson

Thanks Jordi, but I think the guy that designed Stripe's website might want to take some credit!

Collapse
 
agribeenia profile image
Alaa

Thanks for sharing
Do you know how the animated gradient in height.app/ work ?

Collapse
 
olasumboeniola profile image
Olasumbo-Eniola

This is great @jordienr , do you have a post on how to change the color of the gradient?

Collapse
 
wheelers78 profile image
Paul Whelan • Edited

Love this, thanks for sharing @jordienr . How easy is it to change, add to/reduce the colors? Cheers!