Using the CSS3 Linear and Radial Gradients

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 −


 Live Demo

<!DOCTYPE html>
   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);
<h2>Linear Gradient </h2>
<div class="linearGradient"></div>
<h2>Radial Gradient</h2>
<div class="radialGradient"></div>


The above code will produce the following output −