Stripe
Gradient

If you want to learn how to recreate the effect you see above, follow the instructions below. All credits go to the Stripe team at https://stripe.com, as this tutorial shows how I create the effect reverse engineering stripe’s implementation.

Don’t wanna read everything?

If you are not interested in the tilted background but just want the gradient, you can also go straight to the Codepen example code, which creates a canvas over the entire screen area.

HTML

Before getting into the gradient effect I will show you how to setup your HTML and CSS for the same layout you see here on this site.

The HTML setup of this is quite simple, using a single section, a canvas and some elements to display the text. You need to duplicate the title element 2 times applying several different classes on it.

.text-above: The text element that will be visible outside of the gradient.

.text-under-blended: The element, we will apply the blend mode on to receive the color of the background gradient.

.text-under-overlay: A low opacity text over the blended text to keep it well readable.

There are a few wrapping divs to handle paddings and margins before we actually get to the background, which is the section-background-wrap. If you don’t need the tilted background you can skip this and just create a simple canvas.

The data attributes on the canvas will be used later in the script.

<section class="section_top">
            <div class="section-container">
                <div class="section-layout-container container-medium with-padding">
                    <div class="section-layout">
                        <div class="gradient-area">
                            <div class="gradient-title-area">
                            <h1 class="text text-above section-title-1"><?= $title ?></h1>
                            <div  class="section_background-wrap">
                                <canvas id="gradient-canvas" data-js-darken-top data-transition-in></canvas>
                            </div>
                            <div class="text text-under text-under-blended section-title-1"><?= $title ?></div>
                            <div class="text text-under text-under-overlay section-title-1"><?= $title ?></div>
                            </div>
                        </div>
                        <h2 class="section-title-2 subtitle"><?= get_field("subtitle")?></h2>
                    </div>
                </div>
            </div>
        </section>

CSS / SASS

There are a few variables used here:

–gradient-title-margin: Margin used to push down the title within the container.

–gradient-padding: This value is used to set the padding of the section-layout class.

–section-gap: The section gap describes the horizontal distance between the left of the screen and the start of the title text.

–section-skew-Y: Used to tilt the gradient.

–section-angle-sin: Result of applying sin() to the skewY defined above. I keep the number a bit higher then the result of sin, to make sure the gradient has enough height to cover the screen corner.

$container_width (1080px): Width of the container with the title text:

$standard_space (24px) (SCSS variable): Used for the padding on the div that contains the title. On mobile our gap is exactly that $standard_space since our container is already full width. On screens bigger then the $container_width we recalculate the –section-gap accordingly.

    --section-gap: calc( #{$standard_space});
    --gradient-padding:120px;
    --gradient-title-margin: 100px;
    --section-skew-Y: -12deg;
    --section-angle-sin: 0.212;
    --transform-origin-x: calc(var(--section-gap) * 0.8);
    @include mq($container_medium_width) {
        --section-gap: calc((100vw - #{$container_medium_width} + #{$standard_space} * 2) / 2);
    }

The CSS Code is quite simple as well. First we add styles for the title and the subtitle. This is up to your personal taste. I limited the width to force my title into two lines. You can play around with these values or do it differently.

(The code below is SASS format. The mq mixin stands for media query)

.section-title-1 {
        font-size:64px;
        font-weight:700;
        text-transform: uppercase;
        width:500px;
        max-width:80vw;
        @include mq(450px) {
            font-size:70px;
        }
        @include mq($tablet) {
            font-size:90px;
        }
        @include mq($laptop) {
            font-size:100px;
            width:600px;
        }
    }

The stacking and blending of the 3 text layers is done here:

.text {
	line-height: 1;
	margin: var(--gradient-title-margin) 0 0 0;
	text-transform: none;
	letter-spacing: 2px;
	min-height: 200px;
	display: flex;
	align-items: flex-end;
}

.text-above {
	color: var(--font-color);
	position: relative;
}

.text-under {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}
.text-under-blended {
	color: #3a3a3a;
	mix-blend-mode: color-burn;
}

.text-under-overlay {
	opacity: 0.2;
	color: #3a3a3a;
}

Next up is the code to get the tilted effect on the section and the style for the title in order to be overlayed on top of each other.

The most important part is the #gradient-canvas element which represents our canvas element used to display the gradient. Within that we define 4 CSS variables which will be used by the script to determine the colors of the gradient. We define:

#gradient-canvas {
     width:100%;
     height:100%;
     --gradientcolorzero: #6ec3f4;
     --gradientcolorone: #3a3aff;
     --gradientcolortwo: #ff61ab;
     --gradientcolorthree: #E63946;
}

You can use any hexadecimal value for these.

Javascript

Moving on to the JavaScript, I kept it to a single file without any dependencies, making it really easy to implement anywhere. I tried to rename the variables from Stripe’s minified Javascript which was quite difficult and therefore I can not offer explanations for everything.

Essentially all they are using is a minimalistic implementation of WebGL which they called minigl (there were some references spelled out) and a Gradient Class which is used to store all of our animation properties and control the animation. Additionally they implemented a ScrollObserver to disable the effect when the gradient is not visible inside the viewport. In order to reduce complexity I did not try to include this in the script as there were additional dependencies.

I am currently still trying to figure out the code, but until then here is the working example.

Download

Here is a very simple example including a HTML (with inline CSS) and Javascript file(Change the CSS variables inside the html to change the gradient colors):