CSS Radial Gradients
Posted: Fri Oct 27, 2023 8:24 am
CSS Radial Gradients
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default)
The following example shows a radial gradient with evenly spaced color stops:
Example
#grad { background-image: radial-gradient(red, yellow, green);}
Try it Yourself »
Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:
Example
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
Try it Yourself »
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
Example
#grad { background-image: radial-gradient(circle, red, yellow, green);
}
Try it Yourself »
Use of Different Size Keywords
The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner
Example
A radial gradient with different size keywords:
#grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);}
Try it Yourself »
Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
Example
A repeating radial gradient:
#grad { background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);}
Try it Yourself »
Test Yourself With Exercises
Exercise:
Set a linear gradient background for the <div> element, going from the top to bottom, transitioning from "white" to "green".
<style>
div {
: (white, green);
}
</style>
<body>
<div style="height:200px"></div>
</body>
Submit Answer »
Start the Exercise
★
+1
Reference: https://www.w3schools.com/css/css3_gradients_radial.asp
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default)
The following example shows a radial gradient with evenly spaced color stops:
Example
#grad { background-image: radial-gradient(red, yellow, green);}
Try it Yourself »
Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:
Example
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
Try it Yourself »
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
Example
#grad { background-image: radial-gradient(circle, red, yellow, green);
}
Try it Yourself »
Use of Different Size Keywords
The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner
Example
A radial gradient with different size keywords:
#grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);}
Try it Yourself »
Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
Example
A repeating radial gradient:
#grad { background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);}
Try it Yourself »
Test Yourself With Exercises
Exercise:
Set a linear gradient background for the <div> element, going from the top to bottom, transitioning from "white" to "green".
<style>
div {
: (white, green);
}
</style>
<body>
<div style="height:200px"></div>
</body>
Submit Answer »
Start the Exercise
★
+1
Reference: https://www.w3schools.com/css/css3_gradients_radial.asp