i

Learn HTML and CSS in 10 Days

Designing Gradient Backgrounds

Designing Gradient Backgrounds

The CSS3 introduces the gradient backgrounds, and front-end developers, as well as the designers, were rejoiced. The gradient backgrounds are not compatible with legacy browsers but are supported by several modern browsers.

In CSS, the gradient backgrounds are looked upon as background images. We can make a gradient by utilizing ‘background-image as well as the ‘background’ properties.

Linear Gradient Background

For several years the developers and the designers have been cutting up image files related to gradient, made by utilizing image processing software. The process was good, but it took a long time to implement and thus was inflexible. Thus, the linear-gradient background was introduced.

div {

  background: #466368;

  background: -webkit-linear-gradient(#648880, #293f50);

  background:    -moz-linear-gradient(#648880, #293f50);

  background:         linear-gradient(#648880, #293f50);

}

The linear-gradient() functions helps in identifying linear gradients. It contains 2 values, the 1st one is the beginning color value while the 2nd one is the ending color value. The transition between the two will be handled by the browser.