Using the CSS3 Linear and Radial Gradients

CSSWeb DevelopmentFront 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>

Output

The above code will produce the following output −

raja
Published on 11-May-2020 13:03:33
Advertisements