What is linear -Gradient?

The transition between two or more colors in a single direction

linear direction is very flexible. It minimum requires two color arguments it can accept many more color arguments

so, which are the color that use in transition? these can be any type of color including hex,hsl, and rgb

Syntax of Linear-Gradient

linear-gradient(gradientDirection, color1, color2, ...);

Color Stops

color stops allow you to fine-tune the color that are placed along the gradient line

we can use the length unit such as px and percentage %.

example:

.classname { background: linear-gradient(90deg, rgb(255, 0, 0)75%, rgb(0, 255, 0), rgb(0, 0, 255)); }

if no gradientdirection argument is provided to the linear gradient function, it arranges color from top to bottom or 180 degree by default.

Transparency

The linear gradient in CSS also supports opacity which is how transparent or non-transparent an element is, we use alpha channel to set the opacity of the element, with the range of 0 to 1.0. '0' is completely transparent whereas '1' is completely opaque.

To add the alpha channel in rgb just add a rgba where 'a' stands for alpha channel

rgba(redValue, greenValue, blueValue, alphaValue);

Thanks for giving your valuable time for reading my article, hope it added some value.