Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Setting the size of the radial gradients using CSS
To set the size of the radial gradient, use the radial-gradient() function. This function sets a radial gradient as the background image. The second parameter in the function is to be set as the size you want as in the below example −
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32));
Possible values are farthest-corner (default), closest-side, closest-corner, and farthest-side. Following is the code for setting the size of the radial gradients using CSS.
Let us first see the complete syntax of the radial gradient.
Syntax
The following is the syntax of the radial-gradient() function −
background-image: radial-gradient(shape size at position, begin-color, ..., end-color);
Here,
shape − The shape of the gradient. The default value is ellipse.
size − The size of the gradient is set. The values can be: farthest-corner, closest-side, closest-corner, and farthest-side. The default is the farthest-corner,
position − The position of the gradient is defined. The default is the center.
begin-color, ..., end-color − The color stops are the colors to render smooth transitions among.
Stop Color and position
To set the stop color −
color value, stop position
For example −
radial-gradient(red 15%, green 20%, blue 40%);
The stop position is a percentage between −
0% and 100% or
length along the gradient axis
The following are some examples for setting the size of the radial gradients using CSS −
Size of the radial gradient in pixels
For the gradient, we have set the size as 50px with the position center −
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32));
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 200px;
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195,
255),rgb(128, 0, 32));
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
Size of the radial gradient with the closest-side keyword
For the gradient, we have set the size keyword as closest-side −
background-image: radial-gradient(closest-side at 70% 55%, blue, green, yellow, black);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 200px;
background-image: radial-gradient(closest-side at 70% 55%, blue, green, yellow, black);
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
Size of the radial gradient with the farthest-side keyword
For the gradient, we have set the size keyword as closest-side −
background-image: radial-gradient(farthest-side at 70% 55%, blue, green, yellow, black);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 300px;
width: 300px;
background-image: radial-gradient(farthest-side at 70% 55%, blue, green, yellow, black);
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
Size of the radial gradient with the closest-side keyword
For the gradient, we have set the size keyword as closest-side −
background-image: radial-gradient(closest-side at 70% 55%, blue, green, yellow, black);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 300px;
width: 300px;
background-image: radial-gradient(closest-corner at 70% 55%, blue, green, yellow, black);
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html>
888 Views
