Gradients displays the combination of two or more colors. Linear gradients are used to arrange two or more colors in linear formats like top to bottom. Radial gradients appear at center.
Following is the code showing the linear and radial gradients usage in CSS3 −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 100px;
width: 300px;
background-image: linear-gradient(rgb(255, 0, 200), yellow);
}
.radialGradient {
height: 200px;
width: 200px;
background-image: radial-gradient(rgb(255, 0, 200),yellow);
}
</style>
</head>
<body>
<h2>Linear Gradient </h2>
<div class="linearGradient"></div>
<h2>Radial Gradient</h2>
<div class="radialGradient"></div>
</body>
</html>Output
The above code will produce the following output −
