Gradients

Gradients are smooth transitions between two or more specific colors – we can also specify multiple in-between color values or color stops. These color stops are defined by a color value and a position relative to the start and ending colors. When the browser renders a gradient with these color stops, it faces the color from each stop to the next.

Linear gradients

Linear gradients are those color transitions defined across a straight line: top to bottom, left to right, or across a diagonal axis.

Because gradients are still evolving in the CSS3 specification, it is good practice to use the vendor-prefixes for this property.

If we wanted to define a background-image using a linear gradient going from top to bottom, we would specify something like the following (using the Mozilla prefix "-moz-"): background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFE949 100%);

This is interpreted as, starting at the top with color white, transition to black at the bottom of the image.

To add a color stop, we just insert another color-percent combination in the gradient parameter list. If we wanted to define a gradient starting at black, moving to white at a 25% color stop, and then completing to black, we would do the following: background-image: -moz-linear-gradient(top, #FFE949 0%, #FFFFFF 25%, #000 100%);

To adjust the angle, we can replace the top designation with an angle value, such as 30deg:

1 background-image: -moz-linear-gradient(30deg, #FFE949 0%, #FFFFFF 25%, #FFE949 100%);

Radial gradients

Radial gradients define color transitions as a circular or elliptical effect. The basic syntax for a radial gradient is: radial-gradient (center, #FFFFFF, #FFE949);

We can adjust the starting point by placing the center of our gradient relative to the upper left corner of the element in which it appears. background-image: -moz-radial-gradient(30px 30px, #FFFFFF, #FFE949);

This will place the center 30 pixels from the top and 30 pixels from the left of the element. We can also define the shape by adding either circle or ellipse: background-image: -moz-radial-gradient(30px 30px, circle #FFFFFF, #000);

We can define the size using one of the following values:

 closest-side – gradient's shape meets the side of the box closest to its center (for circles) and meets both the vertical and horizontal sides closest to the center (for ellipses).  closest-corner – gradient's shape is sized so it meets exactly at the closest corner of the box from its center.  farthest-side – gradient's shape meets the side of the box farthest to its center (for circles) and meets both the vertical and horizontal sides farthest to the center (for ellipses).  farthest-corner – gradient's shape is sized so that it meets exactly at the farthest corner of the box from its center.  contain – synonymous with the closest-side.  cover – synonymous with the farthest-side.

2

The color stop syntax can also be used for radial gradients: background-image: -moz-radial-gradient(30px 30px, circle farthest-side, #FFFFFF, #FFE949 30%, #FFFFFF);

Repeating Gradients

Using gradients in repeated fashion can provide some unique patterns.

Repeating of gradients can be created using the respective repeating- gradient property.

For a linear repeating gradient, we use repeating-linear-gradient: background-image: -webkit-repeating-linear-gradient(left, #FFE949 10%, #000000 30%);

For a radial repeating gradient, we use repeating-radial-gradient (shown here with the webkit vendor prefix): background-image: -webkit-repeating-radial-gradient(top left, circle, #000000,#FFE949 10%,#000000 60%);

Prefix Organization Most popular browsers -ms- Microsoft Internet Explorer -moz- Mozilla Foundation Firefox, Camino, SeaMonkey -o- Opera Software Opera, Opera Mini, Opera Mobile Originally Apple, now Safari, Chrome, Android, Silk, -webkit- open source BlackBerry, WebOS… -khtml- Konqueror Konqueror

3