title: Creating a Gradient Color in Fragment Shader
body: <p>I'm trying to achieve making a gradient color as the design apps (Photoshop for example) does, but can't get the exact result i want.</p>
  
  <p>My shader creates very nice 'gradients' but also contains other colors that are different from the colors I want to switch in.</p>
  
  <p>It looks nice but, my aim is adding blending functions later and make a kind of color correction shader. but first of all I have to get the right colors.</p>
  
  <p>Here is my fragment shader
  <a href="http://player.thebookofshaders.com/?log=171119111216" rel="noreferrer">http://player.thebookofshaders.com/?log=171119111216</a></p>
  
  <pre><code>uniform vec2 u_resolution;
  
  void main() {
  
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
  
    vec3 color1 = vec3(1.9,0.55,0);
    vec3 color2 = vec3(0.226,0.000,0.615);
  
    float mixValue = distance(st,vec2(0,1));
    vec3 color = mix(color1,color2,mixValue);
  
    gl_FragColor = vec4(color,mixValue);
  }
  </code></pre>
  
  <p>And here is <a href="https://i.stack.imgur.com/YZcs9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YZcs9.png" alt="comparison of the results in shader and design apps"></a></p>
  
  <p>Thanks in advance..</p>