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:
.png)
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:
.png)
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:
.png)
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.
Similar Reads
CSS radial-gradient() Function 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 sha
3 min read
CSS Gradients CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.Types of
7 min read
CSS Linear Gradient CSS Linear Gradient is a built-in function that enables you to create smooth transitions between two or more colors along a straight line. This function is highly versatile, allowing you to specify the starting point and direction (or angle) of the gradient, thereby determining the flow of colors. W
3 min read
HTML Canvas Gradients HTML Canvas Gradients is used to give a gradient effect on Canvas with the help of JavaScript. The different shapes, such as rectangles, circles, lines, text, etc, can be filled with Gradients. To create a gradient on Canvas, we can use two techniques, Linear Gradient and Radial Gradient. Linear Gra
3 min read
CSS Conic Gradients CSS Conic Gradients is an inbuilt CSS function that is used to create a gradient with a color transition rotated at a center not radiated from the center. The conic gradient angle starts from 0 degrees – 360 degrees. Conic Gradients include pie charts and color wheels. The result of the conic-gradie
2 min read