Using the CSS3 Linear and Radial Gradients

CSS Web Development Front End Technology

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

Live Demo

<!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>