Gradients

Figures

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