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. Gradients are specified using the -webkit-gradient function and can be passed in place of an image URL. There are two types of gradients, linear and radial. You can specify multiple in-between color values, called color stops, and the gradient function interpolates the color values between them.

Creating Linear Gradients

A gradient applied to a rectangle area is called a linear gradient. A linear gradient requires a start point 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 the constants left top, left bottom, right top, and right bottom instead of the two numbers. 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 rectanglar area to the bottom, as shown in Figure 1.

Figure 1  Linear gradient

Listing 1 creates the rectanglar gradient shown in Figure 1.

Listing 1  Creating a linear gradient

<style>

.linear { width:130px; height:130px; border:2px solid black; padding: 10px;

           background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));

           -webkit-background-origin: padding; -webkit-background-clip: content; }

</style>

<div class="linear"></div>

Creating Radial Gradients

A gradient specified using circles is called a radial gradient. You specify a radial gradient by setting the type to radial and specifying a start inner circle and an 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 gradients

Listing 2 creates the sphere shapes shown in Figure 2.

Listing 2  Creating radial gradients

<style>

.radial {

        width:150px;

        height:150px;

        border:2px solid black;

        background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),

            -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),

            -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),

            -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));

        display: block;

}

</style>

<div class="radial"></div>

Specifying Color Stops

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 and a radial gradient. 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 point to 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 3, 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 3  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 3 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 the -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 4 simplifies Listing 3 using these functions.

Listing 4  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 5. 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 5  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 6.

Listing 6  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 6, 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

Creating 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. (The padding area is specified by the CSS padding, border, and margin properties.) 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