title: Creating a CSS linear gradient based on two points relative to a rectangle
body: <p>I am trying to recreate the gradient tool in Sketch. The tool in Sketch is using two points with different colors to define a gradient:</p>
  
  <p><a href="https://i.stack.imgur.com/U7ps3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U7ps3.png" alt="Example of how the gradient tool looks in Sketch"></a></p>
  
  <p>I want the output to be in the form of a CSS linear gradient value. The way a CSS linear gradient is constructed is an angle and x number of color stops with a color and a percentage defined: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient</a></p>
  
  <p>So I want to convert two points relative to the rectangle in which the gradient should be rendered to the CSS format (two parameters with the correct percentage).</p>
  
  <p>Any ideas on how to approach this problem?</p>