CSS radial-gradient() Function

Last Updated : 04 Oct, 2024

The radial-gradient() function in CSS is used to create attractive background effects. It creates a gradient that starts from a central point and spreads outward. By default, the gradient begins in the center of the element and smoothly fades to the final color at the edges.

You can customize the shape, size, position, and colors of the gradient to design more complex and interesting backgrounds. In this article, we’ll explain how the radial-gradient() function works, and its syntax, and give some examples for clarity.

Syntax

background-image: radial-gradient( shape size at position, start-color, ..., last-color );

Parameters value

This function accepts many parameters which are listed below:

shape: The shape of the gradient, either circle or ellipse (default is ellipse).
size: The size of the gradient. Options include:
- farthest-corner (default)
- closest-side
- closest-corner
- farthest-side
position: The starting point of the gradient, with the default being the center.
colors: Defines the starting color, ending color, and any color stops in between.

The below example illustrates the radial-gradient() function in CSS:

Examples of radial-gradient() Function

Example 1: Basic Radial Gradient

This example demonstrates the use of a radial gradient background with three colors transitioning from dark green (#090) to white (#fff) to a darker green (#2a4f32). The text inside is centered and styled with different font sizes and weights for emphasis.

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 250px;
            width: 600px;
            background-color: white;
            background-image:
                radial-gradient(#090, #fff, #2a4f32);
        }

        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }

        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">
            GeeksforGeeks
        </div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>

</html>

Output:

Basic Radial Gradient output

Example 2: Customised Radial Gradient

This example uses a circular radial gradient as the background, transitioning from green to white and then blue. The text is centered vertically and horizontally, with a bold heading and smaller subtitle, creating a visually appealing layout with a gradient effect.

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 400px;
            width: 600px;
            background-color: white;
            background-image:
                radial-gradient(circle, green, white, blue);
        }

        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 155px;
        }

        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="gfg">
            GeeksforGeeks
        </div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>

</html>

Output:

Customised Radial Gradient output

The radial-gradient() function in CSS offers a versatile and powerful way to enhance the visual appeal of web pages. By mastering its syntax and parameters, developers can create dynamic and responsive background effects that improve user experience. Whether you are designing for desktop or mobile, radial-gradient() provides the flexibility needed to achieve stunning visual results. As it is supported by all major browsers, you can confidently incorporate radial gradients into your designs for a consistent and engaging look across different platforms.

Supported Browser

Google Chrome 5.0
Edge 12
Mozilla 4.0
Safari 5.0
Opera 11.1

CSS repeating-conic-gradient() Function

vijay_raj

Improve

Article Tags :