Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Build a radial gradient with the shape of a circle
The CSS radial-gradient property allows you to create circular gradient effects by specifying the circle shape parameter. This creates a gradient that radiates outward from a central point in a perfect circular pattern.
Syntax
selector {
background: radial-gradient(circle, color1, color2, color3, ...);
}
Example: Circle-Shaped Radial Gradient
The following example creates a circular radial gradient with multiple colors −
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 300px;
width: 300px;
background: radial-gradient(circle, red, blue, yellow);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 20px auto;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Circle Radial Gradient</h2>
<div id="demo">Circular Gradient</div>
</body>
</html>
A circular element appears with a radial gradient starting from red in the center, transitioning to blue, and ending with yellow at the edges. The text "Circular Gradient" is displayed in the center.
Example: Controlling Circle Size
You can also specify the circle size using keywords like closest-side or farthest-corner −
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
height: 200px;
width: 300px;
margin: 10px;
display: inline-block;
color: white;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.closest-side {
background: radial-gradient(circle closest-side, #ff6b6b, #4ecdc4, #45b7d1);
}
.farthest-corner {
background: radial-gradient(circle farthest-corner, #ff6b6b, #4ecdc4, #45b7d1);
}
</style>
</head>
<body>
<div class="gradient-box closest-side">Closest Side</div>
<div class="gradient-box farthest-corner">Farthest Corner</div>
</body>
</html>
Two rectangular boxes appear side by side, each with different circular gradient patterns. The "Closest Side" box has a smaller circular gradient, while the "Farthest Corner" box has a larger gradient that extends to the corners.
Conclusion
Using the circle parameter in radial-gradient creates perfectly circular gradients. You can control the size and positioning to achieve various visual effects for modern web designs.
Updated on: 2026-03-15T12:37:33+05:30
298 Views
Advertisements