WebKit Browser Prefix: -webkit
Radically different from the current spec

Old and New Versions of WebKit Gradient Commands

There are two versions of the webkit gradient commands, old and new.

The old version can be identified by the command:

    -webkit-gradient (...

where the linear and radial portions were arguments and not part of the command syntax as they were later on with the later versions:

    -webkit-linear-gradient (...
    -webkit-radial-gradient (...

commands.

The -webkit- prefix used by Chrome, Safari and newer Opera gradient commands does not use the same syntax as the unprefixed gradient commands; also, webkit browsers tend to support both old and new version, that is, they support -webkit-gradient and both -webkit-linear-gradient and -webkit-radial-gradient

Angle and Direction

The directions and angles are different from the current spec and are identical to the -moz- ones and are explained in the section about Mozilla

In summary, directions given in words are 180 degrees out and you need to correct for that if you're converting between the two. See: ../../tests/linear/angle/#compare.

Also, when angle of rotation is given in degrees it is ninety degrees out from the current spec. If you take the angle from the spec or the unrpefixed command and subtract that from 90 and use the resultant number you will have the correct angle for the -webkit- prefix version of the command - even if this number is negative - which it will be sometimes - it will work just fine. See: ../../tests/linear/repeat_angle/#compare.

WebKit Gradient Syntax

Consider the W3C spec syntax for a simple green to yellow gradient. All that needs to be specified is the direction and the two colors:

    linear-gradient (left, green, yellow);

The old format of WebKit required you to explicitly state the gradient type as an argument, the starting and ending corners and then the starting and ending color:

    -webkit-gradient (linear, left center, right center, from(green), to(yellow));

As long as you remember you have to specify start and end location as well as start and end color, that's probably the most different part. The actual syntax is as follows:

    -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)lt;radius

The type of a gradient is either linear or radial.

A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.

A radius is a number and may only be specified when the gradient type is radial.

A stop is a function, color-stop, that takes two arguments, the stop value (either a percentage or a number between 0 and 1.0), and a color (any valid CSS color). In addition the shorthand functions from and to are supported. These functions only require a color argument and are equivalent to color-stop(0, ...) and color-stop(1.0, …) respectively.

Here's an excerpt frob the WebKit blog describing the change from -webkit-gradient to -webkit-linear-gradient and -webkit-radial-gradient plus the repeating versions:

    Changes from -webkit-gradient
    You should be able to recreate most of the gradients you made with -webkit-gradient with this new syntax, but there are some changes to be aware of.

    First, -webkit-gradient uses a two-point syntax that lets you explicitly state where a linear gradient starts and ends. linear-gradient does away with this in favor of convenient box-filling behavior. If you really want the gradient to stop before the edges of the box, you can do so via color stop placement.

    Similarly, radial-gradient no longer allows you to specify different start and end points for radial gradients, so the new radial gradients are always concentric. You can, however, produce elliptical gradients with the new syntax, which was not possible with -webkit-gradient.

    So is -webkit-gradient going away? Certainly not! We’ll maintain support for -webkit-gradient for the foreseeable future for all the existing content out there that uses it.