RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/css/css-radial-gradient-function/ below:

CSS radial-gradient() Function - GeeksforGeeks

CSS radial-gradient() Function

Last Updated : 11 Jul, 2025

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:

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:

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4