CSS3 Gradients and Multiple Backgrounds

CSS3 provides the ability to create native radial and linear gradients, as well as include multiple background images on any element.

images/articles/css/css15.webp

Gradients are smooth transitions between two or more specified colors. In creating gradients, you can specify multiple in-between color values, called color stops. Each color stop is made up of a color and a position. The browser fades the color from each stop to the next to create a smooth gradient. Gradients can be utilized anywhere a background image can be used.

There are two types of gradients in CSS3:

  1. Linear
  2. Radial

1. Linear Gradients

Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis. To create a linear gradient, you specify a direction, the starting color, the end color, and any color stops you want to add along that line.

The basic syntax for linear gradients is:

background-image: linear-gradient( … );

Inside the parentheses, you specify the direction of the gradient, and then provide some color stops. For the direction, you can provide either the angle along which the gradient should proceed, or the side or corner from which it should start. For angles, you use values in degrees (deg). 0deg points to the right, 90deg is up, and so on counterclockwise.  For a side or corner, use the top, bottom, left, and right keywords. The top is the default in the absence of a specified direction.

After specifying the direction, provide the color stops. These are made up of a color and a percentage or length specifying how far along the gradient that stop is located.

For example, to have the gradient go from top to bottom of an element with two color stops: #FFF (white) to #000 (black),

background-image: linear-gradient(top, #FFF 0%, #000 100%);

Because the first color stop is assumed to be at 0%, and the last color stop is assumed to be at 100%, you can omit the percentages and achieve the same result:

background-image: linear-gradient(#FFF, #000);

2. Radial Gradients

Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions. At the minimum, you need to provide a start color and an end color. Alternatively, you can also provide a position for the center of the gradient as the first parameter, and a shape and size as the second parameter.

For example,

background-image: radial-gradient(30px 30px, #FFF, #000);

This will place the center of the gradient 30 pixels from the top and 30 pixels from the left of the element. As with background-position, you can use values, percentages, or keywords to set the gradient’s position.

The shape can take one of two values, circle or ellipse, with the latter being the default. For the size, you can use one of the following values:

  • closest-side: The gradient’s shape meets the side of the box closest to its center (for circles), or meets both the vertical and horizontal sides closest to the center (for ellipses).
  • closest-corner: The gradient’s shape is sized so it meets exactly the closest corner of the box from its center.
  • farthest-side: Similar to closest-side, except that the shape is sized to meet the side of the box farthest from its center (or the farthest vertical and horizontal sides in the case of ellipses).
  • farthest-corner: The gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center.

3. Multiple Background Images

CSS3 provides the ability to add more than one background image to any element, even to pseudo-elements. To make a declaration for multiple background images, simply separate the values for each individual image with a comma. For example:

background-image:
url(firstImage.jpg),
url(secondImage.gif),
url(thirdImage.png);

The background images are layered one on top of the other with the first declaration on top, as if it had a high z-index. The final image is drawn under all the images preceding it in the declaration, as if it had a low z-index.

The default values for the various background properties are:

  • background-color: transparent;
  • background-image: none;
  • background-position: 0 0;
  • background-size: auto;
  • background-repeat: repeat;
  • background-clip: border-box;
  • background-origin: padding-box;
  • background-attachment: scroll;