CSS Gradients
CSS gradients let you display smooth transitions between two or more specified colors.
There are two type for use Gradient:
Linear Gradients
The linear-gradient()
CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient>
data type, which is a special kind of <image>
.
p {
background: linear-gradient(blue, yellow);
}
Linear Gradiant
p{
background: linear-gradient(to left, red, yellow, green,blue);
}
Linear Gradiant
p{
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%)
}
Linear Gradiant
Radial Gradients
The radial-gradient()
CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function’s result is an object of the <gradient>
data type, which is a special kind of <image>
.
p{
background: radial-gradient(yellow, green);
}
Radial Gradiant
p{
background: radial-gradient(closest-side, red, green, yellow);
}
Radial Gradiant
p{
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
}
Radial Gradiant
p{
background: radial-gradient(ellipse at top, #e66465, transparent),
radial-gradient(ellipse at bottom, #4d9f0c, transparent);
}
Radial Gradiant