How to make ShaderMaterial gradient to transparent

Hi,

I want to make a two-color gradient to transparent. In the image below you can see what I mean.

Left is the final mesh and on the right a single face. I’m trying to achieve this with a vertex shader and a fragment shader. But unfortunately, I can’t figure it out. Hopefully, somebody can help me

I have this so far:

var custom3Material = new this.$three.ShaderMaterial({
                 uniforms: {
                   vlak3color1: { value: new this.$three.Color('#31c7de')},
                   vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')},
                   positionVlak3: {value: -3.5},
                 },
                 vertexShader: `
                
                   varying vec3 vUv; 

                   void main() {
                     vUv = position; 

                  
                     gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
                   }
                 `,
                 fragmentShader: `
                    
                  uniform vec3 vlak3color1;
                   uniform vec3 vlak3color2;
                   uniform float positionVlak3;

                
                   varying vec3 vUv;
                  
                   void main() {     
                    
                   gl_FragColor = vec4(mix(vlak3color1, vlak3color2, vUv.y-positionVlak3), 1);
                   }
               `,
              });

I get this as a result
output

I would like to be able to adjust the position between the 2 colors and the transparency afterward

Thanks in advance!

Seems to be already answered at stackoverflow:

Yeah that’s right @Mugen87 I also asked the same question at Stackoverflow and the answer there is a good answer!