^^Css3 gradient.

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

to bottom (starting at the top), is the default

background-image: linear-gradient(red, yellow);

to Right (starting at the left). It starts red, transitioning to blue.


background-color:gray;

background-image: linear-gradient(to right, red , 
blue);

CSS1 allowed it to be used for the background-color property only.
CSS2 allowed it to also be used on the border-color property.
CSS3 extended it further to allow the transparent keyword to be used with all properties that accept a color value.

The transparent keyword is the equivalent of rgba(0,0,0,0)transparent black, which is its computed value.

background-color: blue; 

background-image: linear-gradient(to right, red, transparent 100%)

background-color: blue; 

background-image: linear-gradient(to right, red, transparent)

background-color: blue; 

background-image: linear-gradient(to right, red, rgba(0,0,0,0))

background-color: blue; 

background-image: linear-gradient(to right, red,  rgba(100%,100%,100%,0))

background-color: blue; background-image: linear-gradient(to right, red, transparent 50%)

background-color: blue; background-image: linear-gradient(to right, red, transparent 0)

Multiple Color Stops

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

to bottom right (starting at top left)

background-image: linear-gradient(ro bottom right, red, yellow);

background-image: linear-gradient(angle, color-stop1, color-stop2);

background: linear-gradient(30deg, #f00, #0f0);

background-image: linear-gradient(20deg, #f00 30%, transparent 0);

background-color: #0f0; 

background-image: linear-gradient(110deg, #f00 30%, transparent 70%);

background-color: #0f0; 

background: linear-gradient(110deg, #f00 30%, transparent 20%);

------------------------------------------------------------------------------------

repeating-radial-gradient

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);