Syntax of Radial Gradient in CSS

Asked 15-Jul-2021
Viewed 274 times


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


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=''>
    <meta charset='utf-8' />
    <title>Radial | Mindstick</title>
        #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;
    <div id='main'>
        <div class='hello'>
            <h1> Welcome to Mindstick Software Private Limited</h1>

Hope this will help you!

Happy Coding!