Usage
Click (drag) the circle 
to set the color for the selected color 
Click (drag) the arrows 
to set the Lightness (Brightness)
Click the transparency bar to set the opacity for the selected color 
(Active color/alpha arrow is black)
Click (drag) the rotation pointer to set the angle
Click "Reverse" to reverse the colors
Click "Add gradient" temporaly add your settings to the presets
Click a preset to select it
Click to select the current color
Drag to set the color/alpha location
You can add color/opacity by clicking while cursor is crosshair
(You may write the values manualy)
Adjust the preview height say for header: #p_col{height:60px}
Adjust the preview text to test matching colors: #p_col:before{color:white}
The angle is specified as an angle between a horizontal line and the gradient line, going counterwise. In other words, 0deg creates a gradient from bottom to the top, 90deg creates a gradient from left to right (CSS sequence is: top, right, bottom, left)
Preview shows the direction for CSS. Rotation shows the direction for Android, Canvas and SVG (45deg 225deg shows the same)
For more see Examples
The gradients are actualy images, so you can use: background-size/repeat/position, etc. (In webkit based browsers even as border-image) See Gradient Patterns
Color
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 0 and FF (#f68=#ff6688)
An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%)
Example: .box{backgroud:rgb(30,40,50)}
An HSL color value is specified with: hsl(hue, saturation, lightness)
Hue is a degree on the color wheel (from 0 to 360)
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color
Lightness is also a percentage; 0% is black, 100% is white
Example: .box{background:hsl(230,82%,50%)}
To RGB and HSL colors you can add alfa chanel (RGBA, HSLA)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque)
Example: .box{background:rgba(100,110,120,.7)}
(Firefox 49 supports #rgba and #rrggbbaa color values in CSS.)