CSS Radial Gradients

Last Updated : 18 Jun, 2024

CSS Radial Gradients are used for creating visually appealing backgrounds on web pages. This inbuilt CSS function allows you to create a smooth transition between two or more colors, originating from a central point and expanding outward in a circular or elliptical shape. By default, the gradient starts at the center of the element and transitions to the edge.

Additionally, you can create repeating effects using the repeating-radial-gradient() function. This article will explore the syntax, parameters, and practical applications of CSS radial gradients.

Understanding CSS Radial Gradients

Radial gradients are defined by their shape, size, position, and the colors used in the gradient. They offer flexibility in design, allowing for creative and dynamic backgrounds.

Syntax:

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

Parameters: This function accepts many parameters which are listed below:

shape: This parameter is used to define the shape of the gradient. It has two possible value circles or ellipses. The default shape value is an ellipse.
size: This parameter is used to define the size of the gradient. The possible value are:
- farthest-corner (default),
- closest-side, closest-corner
- farthest-side.
position: This parameter is used to define the position of the gradient. The default value is the center.
start-color, …, last-color: This parameter is used to hold the color value followed by its optional stop position.

CSS Radial Gradient Examples

Here are some examples demonstrating the use of CSS radial gradients:

Example 1: Simple Radial Gradient

This example creates a basic radial gradient starting from the center.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 250px;
            width: 600px;
            background-color: white;
            background-image:
                radial-gradient(rgb(17, 255, 0) 0%, 
                                transparent 20%, 
                                rgb(28, 148, 28) 40%);
        }

        .content {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="content">
            GeeksforGeeks
        </div>
    </div>
</body>

</html>

Output:

Screenshot-(39)

Example 2: Non-Centered Radial Gradient

This example creates a radial gradient that starts from the top left corner.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 250px;
            width: 600px;
            background-color: white;
            background-image:
                radial-gradient(ellipse at top left, 
                                #9eee9a, #165e21);
        }

        .content {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="content">
            GeeksforGeeks
        </div>
    </div>
</body>

</html>

Output:

Screenshot-(40)

Example 3: Repeating Radial Gradient

This example creates a repeating radial gradient pattern.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            background: 
              repeating-radial-gradient(circle, #00ff84, 
                                        #2eeb2e 50px, 
                                        #168c45 100px);
            width: 300px;
            height: 300px;
        }

        .content {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="content">
            GeeksforGeeks
        </div>
    </div>
</body>

</html>

Output:

Screenshot-(41)

CSS radial gradients provide a visually appealing method for creating background effects on web pages. By understanding the syntax and parameters, you can create a variety of gradient designs, from simple transitions to complex repeating patterns. These gradients are widely supported across modern browsers, ensuring a consistent user experience. Experiment with different shapes, sizes, positions, and color combinations to enhance your web design projects.

CSS Gradients

mansigeekso9ii

Improve

Article Tags :

CSS Radial Gradients

Understanding CSS Radial Gradients

CSS Radial Gradient Examples

Example 1: Simple Radial Gradient

Example 2: Non-Centered Radial Gradient

Example 3: Repeating Radial Gradient

Similar Reads

Thank You!

What kind of Experience do you want to share?