How to put Gradient Colors in a website ?
In this article, we will learn about how to put Gradient colors on a website, CSS gradients are images made by the transition between two or more colors. There are three types of gradients which are given below:
- Linear Gradient
- Radial Gradient
- Conical Gradient
Image shows the types of gradients
Linear gradient: It is the type of gradient that progresses in a linear (straight) manner.
Syntax:
background-image: linear-gradient( direction, color1, color2, ... )
Example: This example uses a linear-gradient property value to create a gradient color in a website.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#container {
height: 200px;
background: linear-gradient(360deg, #fd6f46 10%, #fb9832 90%);
}
.gfg {
color: #000000;
text-align: center;
font-size: 30px;
font-weight: bolder;
padding: 80px;
}
</ style >
</ head >
< body >
< div id = "container" >
< div class = "gfg" >GFG</ div >
</ div >
</ body >
</ html >
|
Output:
Radial gradient: It is a type of gradient that has similar to linear-gradient, but the difference between the two is that this gradient radiates around from the central point.
Syntax:
background-image: radial-gradient( shape size at position,
start-color, ..., last-color );
Example: In this example, we are using radial gradient property value to create a gradient color in a website.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS Gradients</ title >
< style >
#main {
height: 250px;
width: 600px;
background-color: white;
background-image: radial-gradient(#090, #fff, #2a4f32);
}
.gfg {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.geeks {
font-size: 17px;
text-align: center;
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
</ div >
</ body >
</ html >
|
Output:
Conical gradient: It is the type of gradient that creates an image with color transitions happening around the central point of the image.
Syntax:
Background image: conic-gradient(color degree, color degree, ...)
Example: In this example, we are using a conical gradient property value to create a gradient color in a website.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Conic Gradient</ title >
< style >
.box {
background-color: yellow;
height: 200px;
width: 200px;
float: left;
margin: 20px;
border-radius: 50%;
}
.c {
background-image: conic-gradient(red, yellow, green, red);
}
</ style >
</ head >
< body >
< div class = "box c" ></ div >
</ body >
</html
|
Output:
Last Updated :
11 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...