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!

STEP 1

Add this script before </body> tag

 <script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@main/webgl-gradient.js" > </script>

<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 it here