Css gradients:linear-gradient()

Mohamed Ed-daouy — Tue, 17 Dec 2024 11:19:40 +0000

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%);

DEV Community: Mohamed Ed-daouy

Css gradients:linear-gradient()

gradient {