How to use gradients in css?

CSS gradients are represented by the <gradient> data type, a special type of <image>made of a progressive transition between two or more colors. We can choose between three types of gradients: linear (created with the linear-gradient() function),  radial (created with radial-gradient()), and conic (created with the conical-gradient function). You can also create repeating gradients with the repeating-linear-gradient() and repeating-radial-gradient() functions.

Gradients can be used anywhere you would use an <image>, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.