A gradient fill is a graphical effect that produces a three dimensional color look by blending one color into another. Multiple colors can be used, where one color gradually fades and changes to the other color, such as the gradient blue into white shown below. CSS gradients let you display smooth transitions between two or more specified colors
There are two types
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
syntax of Radial Gradients in CSS:-
background-image: linear-gradient(angle, color-stop1, color-stop2);
example is:-
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 55px;
background-image: linear-gradient(to right,orange,red, yellow, green, blue,black, indigo, violet);
}
</style>
</head>
<body>
<div id="demo" style="text-align:center;margin:auto;color:white;font-size:40px;font-weight:bold">
Anamol Soman
</div>
<p>Anamol Soman</p>
</body>
</html>
directions-to right,to left ,to bottom ,to top
output of above example is
0 Comments