Specifying Gradients
We'll cover the following...
There is just one more thing we need to look at before our look into working with colors is wrapped up. That thing is gradients! So far, we’ve only specified a single color value for the various things we’ve been coloring. Gradients change all that. With gradients, you have the ability to specify multiple colors and how those colors blend in with each other. In the following sections, let’s learn all about them.
The Linear Gradient
The first gradient variation we’ll learn about is the linear one. A linear gradient is one where you have two or more colors on a virtual (invisible) straight line. These colors blend evenly as you move from one color to another on this line. That definition is probably more complicated than it needs to be, but hopefully the following image makes more sense:
We have two colors one two ends of a rectangle. On one end is a light gray. On the other end is cyan. Between those two points, the colors gradually blend between the gray and cyan to give you this smooth look. That blending is one of the hallmark features of a gradient. Now, let’s go a bit deeper.
These two points on either end of our gradient have a more formal name. They are known as gradient color stops or just color stops. You can have as many color stops as you want, and each color stop defines its own color and position on the virtual straight line:
In this version, we modified our earlier example by adding a slightly darker blue gradient stop near the right. Notice that how our colors blend has changed to accommodate this new color that has been thrown in. By adding (or removing) gradient stops and positioning them in various places on our virtual straight line, you can create a variety of different gradient effects.
There is just one more thing to cover before we start looking at how to use this linear gradient to colorize what we draw on the ...