Radial Gradient

The parameters for radial-gradient are: radial-gradient(position, size and shape, color stops );

Position: where to place the center of the gradient. You can use keywords (top, left, center, right, bottom) or numeric values such as (%, px, em) to specify position.
Defaults to center center or 50% 50% if not given.

Size and Shape: Here you can change the dimensions of the gradient to cause a ellipse or a circle.

Color stops: Defines where each color should be strongest.
Defaults if not specified, to 0% the center for the first color, and 100% for the second.

Linear Gradient

Specifying the line angle for the gradient can be done via keywords or degrees. To use a keyword for the angle, prefix it with "to" eg "to top right".
Keywords map to degrees with 0deg equal to top then in a clockwise direction right equals 90deg.

YouCan specify one or more color values.
Stops specify that you want a specific color at the position supplied as the stop.

Be aware that the parameters have gone through some changes and you may find example using old code, and older browers not supporting the newer parameters.

See also:

Syndicate content