background-image: linear-gradient


There are 3 ways to develop the linear-gradient:

  1. background-image:linear-gradient(to right, #000000, #000000)
  2. background-image:linear-gradient(to left, rgb(0,0,0), rgb(0,0,0))
    • color is written in RGB (red, green, blue)
  3. background-image:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,1))
    • color is written in RGBA (red, green, blue, alpha)
  • First command has various options, some of them are:
    1. to right
    2. to left
    3. to top
    4. to bottom

These commands will tell browser the start point of the first color to the end point, dividing each color in the same amount (and can be adjustable too). Learn more about gradients.

After the first command option, goes the color. You must select at least, 2 colors separated by comma, and you may add any quantity of colors you want. Each color you add, it will follow the last one in the same direction you set in the first command.