(specifying the origin point) with to bottom right (specifying Note that the syntax is likely to change, again, replacing top left The equivalent for other browsers: background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), to(black)) īackground: -webkit-linear-gradient(top left, white, black) īackground: -moz-linear-gradient(top left, white, black) īackground: -o-linear-gradient(top left, white, black) īackground: -ms-linear-gradient(top left, white, black) īackground: linear-gradient(to bottom right, white, black) You can see both the old and new WebKit syntax and The top left corner of the box with white and ending at the bottom rightĬorner with black. In the box below we have a simple example with a gradient starting in Version that currently works on iOS 4 devices. webkit-gradient for the forseeable future and it is the only webkit-repeating-linear-gradient option identical to the In the new syntax theĭistance value can be specified using pixels, ems or a percentage. Value (0.0 to 1.0) where from is equivalent to a color-stop In the WebKit syntax case a color stop is comprised of aĬolor (name, hex, rgba) and an optional percentage (0-100) or decimal ( ) or two integers representing pixels, but

Points are specified either with two percentage values Before and after these points the first/last colours The WebKit syntax lets you specify specific points for the gradient Gradient will start from there and move to the opposite side/corner or You can only specify a single point (or angle) and the Gradient implementation is perhaps more limited, but much more userįriendly.

The proposed unprefixed syntax: background: -webkit-gradient(īackground: -webkit- linear-gradient(,, ) įrom the difference in syntax you can see that the Mozilla linear Here you can see the original syntax which will work in Safari 4 andĬhrome (WebKit), and the new format which works also in Firefox 3.6a (Gecko) browsers, and now in Opera 11.10. In the following examples we try to include equivalent styles usingĮach format where possible. Opera 11 (except for repeating gradients) and Internet Explorer 10.īefore being (CSS3) finalised, however, we can expect a further minorĬhange to the specification where directions are specified using anĮxplicit to instead of an implicit from to indicateĭirection, so as to match the effect of setting an angle for the This has now been adopted by most browsers, including Including four different options for linear, radial and repeating The WebKit syntax has now been replaced by a new (Mozilla) format (with some tweaking) a form of repeating gradient. webkit-gradient capable of describing both linear, radial and Now the situation isįirstly, we have the original (WebKit) specification, for a single Having already worked through the differences in the radial gradients syntax between WebKitĪnd Firefox browsers I thought that the linear gradients wouldīe simpler, but apparently that's not the case.

Firefox css webkit