Syntax of Radial Gradient in CSS

0 votes
38 views
Ethan Karla asked 12 days ago in programming by Ethan Karla

What is the use of Radial Gradient in CSS? What is the syntax of using that property? State with the help of an example.        

1 Answer

0 votes
Shivam Prajapati answered 12 days ago by Shivam Prajapati

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!