Radial Gradient is an in-built function of CSS that helps in creating a smooth transition between different colors. This sets the radial gradient as the background image. It can be a circular or elliptical shape. They are very helpful because they allow you to create a pattern background instead of a pattern image. Because of that the website loads faster than usual.
Syntax for Radial Gradient :
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Let's understand with the help of an example :
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title>Radial | Mindstick</title>
<style>
#main {
background-image: radial-gradient(farthest-side at left bottom,white, #f0ad4e);
}
.hello {
text-align: center;
font-size: 40px;
color: black;
font-weight: bold;
padding: 100px;
}
</style>
</head>
<body>
<div id='main'>
<div class='hello'>
<h1> Welcome to Mindstick Software Private Limited</h1>
</div>
</div>
</body>
</html>
Hope this will help you!
Happy Coding!
