16 September 2017

CSS Gradient

CSS Gradient

CSS Gradient is used is used to display smooth transition (changes) within two or more specified colors.

Advantage of CSS Gradient

Earlier, you had to use images for these types of changes, but when you use CSS Gradient in place of images you get following advantage;
  • Reduce download time.
  • Reduce bandwidth usage.
  • In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
  • No need to use image for transition effects.

Types of gradient in CSS3.

There are two types of gradient in CSS3, which is given below;
  • Linear gradients
  • Radial gradients

Linear gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.


background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to green;


<!DOCTYPE html>
#grad-top-bottom {
    height: 200px;
    background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, green); /* Standard syntax (must be last) */

<div id="grad-top-bottom"></div>


Start typing and press Enter to search