linear-gtradient() css function creates a linear gradient as the background
the syntax is :
a css selector{
background-image:linear-gradient(angle,color1,color2,color3,......);
}
angle :optional is references to the direction of gradient
by default is 180deg
instead of deg we can use these for key-words to determine the direction:
*to right :equals 90deg
**to left :equals 270deg
* to top:equals 0deg
**to bottom:equals 180 deg(is optional because the degree in llinear-radient() is to bottom
**color1 :required we this value consists o a color value followed by
an opotional color stop one or two positions (a percentage between 0% and 100% or a length along the gradient axis ).
<!DOCTYPE html>
gradient {
height: 200px;
/* A gradient tilted 45 degrees,
starting blue and finishing red /
/
/*
background-image:linear-gradient(45deg, blue, red);
*/
/* A gradient going from the bottom right to the top left corner,
starting blue and finishing red /
/
/*
background-image:linear-gradient(to left top, blue, red)
*/
background-image:linear-gradient(to right, red ,50%, blue)
/*
Multi-position color stop: A gradient tilted 45 degrees,
with a red bottom-left half and a blue top-right half,
with a hard line where the gradient changes from red to blue
*/
/*
background-image :linear-gradient(
45deg,
red 0 50%,
blue 50% 100%);
*/
Top comments (0)