Chapter 11 | The Book of CSS3

Examples

Figure 11-1 A simple top-bottom, two-color linear gradient
Figure 11-2 Examples of different point values for linear gradients
Figure 11-3 Examples of different color-stop values
Figure 11-4 A simple two-color radial gradient
Figure 11-5 A circular radial gradient
Figure 11-6 Examples of different values for radial gradients
Figure 11-7 Different color-stop values for radial gradients
Figure 11-8 A radial gradient only possible with the old WebKit syntax
Figure 11-9 Multiple gradient background values
Figure 11-10 Repeating linear gradients
Figure 11-11 Repeating radial gradients

Browser Support

	WebKit	Firefox	Opera	IE
Linear Gradients	Yes^{1 3}	Fx16	O12.1	IE10
Radial Gradients	Yes^{1 3}	Fx16	O12.1	IE10
Repeating Linear Gradients	Yes^{1 3}	Fx16	O12.1	IE10
Repeating Radial Gradients	Yes^{1 3}	Fx16	O12.1	IE10

Notes

¹ With browser prefix
² Older versions have incorrect syntax
³ Old syntax

A note on browser versions

Where the status is given as Yes, the property or feature is well implemented in all recent versions of the respective browser. If a feature is new (as in the last 12 months) the browser version number is shown instead.

For complete version history I highly recommend the When can I use... compatibility tables.