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
Setting the size of the radial gradients using CSS
The CSS radial-gradient() function creates a radial gradient as a background image. You can control the size of the gradient using specific keywords or exact measurements to achieve different visual effects.
Syntax
background-image: radial-gradient(shape size at position, color1, color2, ...);
Size Values
| Value | Description |
|---|---|
closest-side |
Gradient ends at the side of the box closest to the center |
farthest-side |
Gradient ends at the side of the box farthest from the center |
closest-corner |
Gradient ends at the corner closest to the center |
farthest-corner |
Gradient ends at the corner farthest from the center (default) |
length |
Specific size in pixels, ems, or percentages |
Example: Custom Size with Pixels and Percentage
This example sets the gradient size using specific measurements −
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
width: 250px;
height: 200px;
background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));
margin: 20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>
A rectangular box with a radial gradient that has a custom elliptical size (40% width, 50px height) centered in the element, transitioning from green to cyan to dark red.
Example: Using closest-side Keyword
The closest-side keyword makes the gradient end at the nearest side of the container −
<!DOCTYPE html>
<html>
<head>
<style>
.closest-side {
width: 200px;
height: 200px;
background-image: radial-gradient(closest-side at 70% 55%, blue, green, yellow, black);
margin: 20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="closest-side"></div>
</body>
</html>
A square box with a radial gradient positioned at 70% from left and 55% from top, with the gradient extending to the closest side of the container, creating a circular gradient effect.
Example: Using farthest-side Keyword
The farthest-side keyword extends the gradient to the farthest side of the container −
<!DOCTYPE html>
<html>
<head>
<style>
.farthest-side {
width: 300px;
height: 200px;
background-image: radial-gradient(farthest-side at 70% 55%, blue, green, yellow, black);
margin: 20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="farthest-side"></div>
</body>
</html>
A rectangular box with a radial gradient that extends to the farthest side from the center point, creating an elliptical gradient that fills more of the container.
Example: Using closest-corner Keyword
The closest-corner keyword makes the gradient extend to the nearest corner −
<!DOCTYPE html>
<html>
<head>
<style>
.closest-corner {
width: 300px;
height: 200px;
background-image: radial-gradient(closest-corner at 70% 55%, blue, green, yellow, black);
margin: 20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="closest-corner"></div>
</body>
</html>
A rectangular box with a radial gradient that extends from the specified position to the closest corner of the container, creating a smaller, more focused gradient effect.
Conclusion
Controlling radial gradient size allows you to create precise visual effects. Use specific measurements for exact control or keywords like closest-side and farthest-corner for responsive gradients that adapt to container dimensions.
2K+ Views
