Radial Gradient Background CSS
In this article, we will see about radial gradient background CSS
Radial Gradient
It is a function used to create a background consisting of a transition between two or more colors that radiate from a given origin.
Syntax:
Background: radial-gradient(shape at position, color-stop 1, color-stop2,...last-color-stop)Shape at position
Shape = It indicates the shape of the gradient. i.e circle, ellipse
position = It indicates the origin of the gradient
top left, tp center, top right
center left, center center, center right
bottom left, bottom center, bottom right
offset-x-px offset-y-px
offset-x-% offset-y-%
color stop: color position
You can give color value as “color name”, hex color value, rgb() color value, rgba() color value.
And you can give position value to px (pixels) or % percentage.
Example code
<html>
<head>
<style type="text/css">
.circle{
width: 300px;
height: 300px;
background: radial-gradient(circle at center center, red 0%, blue 100%); }
.ellipse{
width: 300px;
height: 300px;
background: radial-gradient(ellipse at center center, red 0%, blue 100%); }
</style>
</head>
<body>
<div class="circle"> </div><br>
<div class="ellipse"> </div>
</body>
</html>Output:
- In the above code, we have two <div> tags with different classname like”circle” and “ellipse”.
- We select the “circle” class name in CSS using the class selector. Then we use raidal-gradient property and set the shape to “circle“, and the position to “center center“. Then we use red 0% and blue 100%.
- We select the “ellipse” class name in CSS using the class selector. Then we use raidal-gradient property and set shape to “ellipse“, and the position to “center center”. Then we use red 0% and blue 100%.
- See the above output, the difference between ellipse and circle value in radial-gradient property.
