CSS gradient is an image made of a progressive transition between two or more colors.

Gradients can be used in:

• Anywhere an image can be used (theoretically).
  For example background-image, lilst-style-image, border-image, content, cursor, ...

Useful: we can make our regular background darker (for text contrast) by adding a gradient image (with gray color/s) as the top background image, while the regular background is on the bottom (multiple background images).

There are 6 Gradient Types:

Where:

• Linear gradient can go from left-to-right, top-to-bottom, or at any angle you chose.
• Radial gradient differ from linear in that they start at a single point and emanate outwards.
• Repeating gradients are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.
• Conic gradient is a new one and not supported by every browser (true for the end of 2018).

There are many online tools for gradient generation. See for example Gradient Generators.
See also Beautiful color gradients examples.