⚠ Only works properly in Firefox for now - the tool will be displayed in other browsers, but if you change the color formats from rgb[a] to something else, the overlay won't update ⚠
This tool overlays information on top of a CSS linear-gradient to help understand how it is rendered in browsers.
If you read the spec (http://dev.w3.org/csswg/css-images/#linear-gradients) carefully, you'll learn a tone of details about how linear gradients are constructed you might not know. This tool's goal is to make it more obvious how the gradient angle is calculated and how the color stops are positioned.
Tool usage: - you can change the linear-gradient value by typing into the text box, - you can use the up and down arrow keys on any number to increase/decrease the number (used in conjunction with the Ctrl and Shift keys, you can make it go slower or faster).