CSS3 मे Gradients आपको दो या अधिक Colors के बीच Smooth Transition को Specified करने देते है.
CSS3 दो प्रकार के Gradients को परिभाषित करता है
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Linear Gradients का उपयोग दो या अधिक Colors को Linear Formats मे से ऊपर से नीचे तक करने के लिए किया जाता है.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#grads1 {
height: 200px;
background: -webkit-linear-gradient(red,green);
background: -o-linear-gradient(red,green);
background: -moz-linear-gradient(red,green);
background: linear-gradient(red,green);
}
</style>
</head>
<body>
<div id="grads1"></div>
</body>
</html>
Radial Gradients की Position उस Point पर है जहां Radial प्रारंभ होता है यानी Ellipse या Circle का Center होता है.
<!DOCTYPE html>
<html>
<head>
<style>
#grads1 {
height: 280px;
width: 600px;
background: Yellow;
background: -webkit-radial-gradient(red, blue, green);
background: -o-radial-gradient(red, blue, green);
background: -moz-radial-gradient(red, blue, green);
background: radial-gradient(red, blue, green);
}
</style>
</head>
<body>
<div id="grads1"></div>
</body>
</html>