Simple Gradients
Chapter 6 looks at gradients, with a particular focus on the different color transition effects you can achieve by adjusting color stop positions and properties.
The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository. Be sure to read the O’Reilly Media policy on the use of example code.
- Figure 6-1 (two-stop gradient):
- Figure 6-2 (three-stop gradient):
- Figure 6-3 (offset gradient):
- Figure 6-4 (gradient stripes):
- Figure 6-5 (semi-transparent gradient):
- Figure 6-5 (single-color opacity gradient):
- Figure 6-7 (seven-stop rainbow gradient):
- Example 6-1 & Figure 6-8 (comparing three-color rainbow gradients):
Return to the main table of contents.