A gradient is the outcome of blending multiple colors or channels gradually together. A rainbow is an example of a gradient.

Common types

The most common types of gradients are linear, radial, angle, reflected and diamond:

usual gradient suspects

In digital media, the gradient is usually calculated using linear interpolation to gamma compressed RGB values.

Web 2.0 gradients

"Web 2.0" gradients are usually described as either:

  • Sharp gradients, ie. gradients that have a color stop between two colors without any blending (see e.g. the angle gradient at 12 o'clock under "Common types").
    ⇒ To make the object look glossy.
  • Subtle gradients, where colors either blend very slowly or where the blended colors are close together.
    ⇒ To give the object texture.

Some examples of gradients that could be described as "web 2.0 gradients":

some web 2.0 gradients

Fade effect

Using transparency instead of a color gives the image/object a fading effect:

making of fading effect
(Image by @Johannes)

history | show excerpt | excerpt history