Script Writer

Stripe WebGL Gradient

Want to use a WebGL gradient similar to that of Stripe? Just use our visual script writer, copy a few lines of code to your Webflow site and BAM! You're done!

CLone it
STEP 1
Add this script before </body> tag
 <script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@main/webgl-gradient.js" > </script> 
Copy Script
STEP 2
Select your gradient colors (hex codes) & paste style to page
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

<style>

#gradient-canvas {
--gradient-color-1: [#color1]#3E73F4[#color1];
--gradient-color-2: [#color2]#3064F8[#color2];
--gradient-color-3: [#color3]#5393FF[#color3];
--gradient-color-4: [#color4]#4279F4[#color4];
--gradient-color-5: [#color5]#356AF9[#color5];
}
</style>

Copy Style
STEP 3
Add this script before </body> tag
<script> 
var gradient = new Gradient()
gradient.initGradient('#gradient-canvas');
</script> 
Copy Script
STEP 4
Add this code into an Embed Block
<canvas class="canvas-item" id="gradient-canvas">

<style>
.canvas-item{
  height:100%;
  width:100%;
}
</style>
 
Copy Script

Gradient Demo

CLONE Stripe.com