Gradients

A gradient is a visual effect you can apply to a surface that gradually changes the fill color from one value to the next creating a rainbow effect. Gradients can be used anywhere that an image can be used. For example, you can specify a gradient that changes the color of a background from yellow at the top to blue in the middle and green at the bottom. You can specify multiple in-between color values, called color stops, and the gradient function interpolates the color values between them.

Gradients are specified using the -webkit-gradient function and can be passed in place of an image URL parameter. For example, pass a gradient function as the image value for backgrounds, borders, and lists. The first argument of the -webkit-gradient() function is the type. There are two types of gradients, linear and radial.

A gradient applied to a rectangle area is called a linear gradient. A linear gradient requires a start and end point to specify the direction of the gradient. Points are specified using two numbers separated by a space where the first number is the x-coordinate and the second is the y-coordinate. You can use these constants instead of two numbers as shortcuts for the points left top, left bottom, right top, and right bottom. For example, pass left top as the first point and left bottom as the second point to create a linear gradient that progresses from the top of a rectangle area to the bottom as shown in Figure 1.

Figure 1  Linear gradient

A gradient specified using circles is called a radial gradient. You specify a radial gradient using a start inner circle and a end outer circle. Each circle is specified by a center and a radius. The color values change gradually from the circumference of the inner circle outward to the circumference of the outer circle. The two circles can have offset centers creating spherical effect when rendered as shown in Figure 2.

Figure 2  Radial gradient

You use the color-stop function to create a color stop. You pass this function as a parameter to the -webkit-gradient() function to specify the start, intermediate, and end colors in both a linear or radial grradient. The colors between the specified color stops are interpolated.

The first parameter of the color-stop() function is the percentage of the distance from the start and end points of the gradient. The second parameter is the color at that location. For example, if the first color stop in a linear gradient is color-stop(0.0, yellow) as shown in Listing 1, then the gradient starts at yellow. If the next color stop is color-stop(0.5, orange), then the gradient transitions from yellow to orange at 50% of the total distance. If the end color stop is color-stop(1.0, red), then the gradient transitions from orange at 50% to red at the end, %100 of the distance.

Listing 1  Creating an orange gradient

body {

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, yellow),

                color-stop(0.5, orange), color-stop(1.0, red));

}

The result of Listing 1 is shown in Figure 3.

Figure 3  Orange gradient

The from() and to() functions are provided as a convenience for setting the start and end color stops. Passing from(yellow) as the color stop to -webkit-gradient() function is the same as passing color-stop(0.0, yellow). Passing to(red) is the same as passing color-stop(1.0, red). Listing 2 simplifies Listing 1 using these functions.

Listing 2  Using the from() and to() functions

body {

    background: -webkit-gradient(linear, left top, left bottom, from(#ff0),

                color-stop(0.5, orange), to(rgb(255, 0, 0)));

}

For both types of gradients, you do not need to specify colors at 0% and 100% as shown in Listing 3. At and before the first specified color stop, the color of the first color stop is used. At and after the last color stop, the color of the last color stop is used. In other words, if the first color stop is at 40%, then that color is used from 0% to 40%.

Listing 3  Not specifying start and end color stops

background-image: -webkit-gradient(linear, left top, left bottom,

                    color-stop(0.40, #ff0),

                    color-stop(0.5, orange),

                    color-stop(0.60, rgb(255, 0, 0)));

In contrast, to Figure 3, which shows the results when the gradient values are interpolated from 0% to 100%, Figure 4 shows the results when the interpolation starts at 40% and ends at 60%. Yellow is used from 0% to 40% and red from 60% to 100%.

Figure 4  Orange gradient that starts later and ends earlier

In addition, if no color stop is specified, then the gradient is transparent black. If multiple color stops are specified at the same location, then they appear in order. Only the first and last color stop at location 0.5 is used in the sample shown in Listing 4.

Listing 4  Multiple color stops at the same location

-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00))

Figure 5 shows the results of Listing 4 where the gradient transitions from blue to white in the first half and green to white in the second half.

Figure 5  Color stops at the same location

Background Gradients

When specifying a gradient as a background, the gradient becomes a background tile. If no size is specified, then the gradient scales to the box specified by the -webkit-background-origin property. This property defaults to the upper-left corner of the padding area, so the gradient is scaled to the size of the padding-box as shown in Figure 3. This is equivalent to setting the -webkit-background-size property to 100% in both the x and y directions.

If you want to tile a vertical gradient using a narrow strip, set -webkit-background-size to give the gradient tile an explicit size. Figure 6 shows the same linear gradient as in Figure 3 but with the -webkit-background-size property set to 20.0.

Figure 6  Tiled linear gradient