CSS Radial Gradients - Coding

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.

Reffered: https://www.geeksforgeeks.org

CSS

Related
Foundation CSS Off-canvas Sizes
Pure CSS Email Layout
Foundation CSS Media Queries
How to create a drop shadow effect using CSS ?
How to make Parent Div Activate Styling of Child Div for Hover and Active ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12