One of CSS3's amazing color feature is gradients. They allow a smooth transition from one color to another.

They are declared using the background-image property as they have no special property.

Gradients allow us to create transparency by translating the color hex to rgba mode.

In spite of many enhancements, vendor prefixes are used to make the form browser compatible so the browser can interpret the styles.


The syntax for gradients is as follows:

linear-gradient (<angle><to [left / right || top / bottom]><color [percentage/length]><color [percentage/length]>)


The values of gradients include the following:

  • angle: This specifies the gradient's angle of direction
  • color: This specifies the color value with an optional option of stop ...

Get Mastering HTML5 Forms now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.