Chapter 9


  1. The progression of a simple gradient
  2. Simple linear gradients
  3. Solid-color gradients
  4. Fading to white versus fading to transparent
  5. The distribution of color stops along the gradient line
  6. Placing color stops every 25 pixels
  7. Gradient clipping when colors stops go too far
  8. Gradient clipping when color stops have negative positions
  9. Placing color stops every 10 percent
  10. The effect of coincident, or “hard”, color stops
  11. Hard-stop stripes
  12. Handling color stops that are out of place
  13. Linear blending from one color stop to the next
  14. Black-to-gray with differing midpoint hints
  15. Comparing two linear gradients to one hinted transition
  16. The placement and sizing of the gradient line
  17. The calculation of color along the gradient line
  18. The extension of selected colors along the gradient line
  19. How gradients are constructed for various images
  20. A gradient with stops beyond the start and ending points
  21. A gradient headed toward the top right
  22. Examples of the side effects of a quadrant-directed gradient
  23. Papayawhip, palegoldenrod, and salmon colored table cloths
  24. Tiling gradient images with background-repeat
  25. A repeating gradient image with repeating-linear-gradient
  26. Dealing with hard resets in repeating-gradient images
  27. A simple radial gradient in multiple settings
  28. Simple radial gradients
  29. Percentage-sized elliptical gradients
  30. The effects of radial gradient sizing keywords
  31. Changing the center position of radial gradients
  32. Changing the center position of explicitly sized radial gradients
  33. Adding a color stop
  34. The gradient ray and some of the ellipses it spawns
  35. Setting the gradient ray’s ending point
  36. Color stops beyond the ending point
  37. Handling a negative color-stop position
  38. The effects of a zero-width ellipse
  39. Very, very tall ellipses
  40. Repeating radial gradients
  41. A simple conic gradient and its linear equivalent
  42. Conic gradients with angled color stops and different start angles
  43. Rotated and offset conic gradients
  44. Hue-wheel conic gradients with and without corner rounding
  45. Conic gradients with solid color wedges and smooth transitions
  46. A repeating conic gradient
  47. Three variants on a repeating conic gradient
  48. Tiled radial gradient images
  49. It’s time to play the music…
  50. The two “fold” gradients