While the directions of gradients in the CSS3 linear-gradients at angles of 0°, 90°, 180° and 270°, which point to right, up, left and down respectively, were relatively easy to tell, it was a bit unclear to me with other angles I tried at first. I wrote a short program to enable me to see clearly how it works. I hope this will benefit someone. The program has been tested on current versions of webkit and mozilla browsers.[30 Degrees, black 50%,white ]
In the above gradiented box the arrow shows the direction of the gradient. The angle is varied continuously. The colors are also varied every 45 degrees when in Auto ON mode. You may click on the Auto ON button to toggle to Auto OFF mode to stop the colors from changing. The values in the square brackets shown are the actual parameters passed to the linear gradient function in the CSS3 rules as in:-
background-color: -moz-linear-gradient(30deg, #fff 50%, #000). Click on a particular parameter to change its current value to your desired one. Also click on the arrow to stop and/or start the rotation at any degree angle.
Moreover, the line in the box is added to show the relationship between the direction of the gradient and the line formed by the color stop, which runs parallel to the line and is perpendicular to the arrow representing the direction.