CSS gradient is used for various transformations between two or more colors, which, consequently, can serve as a background for the element.
Syntax of CSS Gradient:-
The syntax used for linear gradient in CSS are:-
background-image: linear-gradient(direction/angle,
color1, color2, color3...)Example:- Here is the following example to understand the liner gradient scheme.
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Linear Gradient</title>
<style type="text/css">
#l
{
height: 70px;
width: 150px;
background-image: linear-gradient(to bottom, green, yellow);
}
#l1
{
height: 70px;
width: 150px;
background-image: linear-gradient(to top, green, yellow);
}
#l2
{
height: 70px;
width: 150px;
background-image: linear-gradient(to left, green, yellow);
}
#l3
{
height: 70px;
width: 150px;
background-image: linear-gradient(to right, green, yellow);
}
#gradangl{
height: 70px;
width: 150px;
background-image: linear-gradient(40deg, green, yellow);
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<h2>This is linear gradient with Top to Bottom
linear transition</h2>
<div id="l"></div>
<h2>This is linear gradient with Bottom to Top
linear transition</h2>
<div id="l2"></div>
<h2>This is linear gradient with Left to Right
linear transition</h2>
<div id="l1"></div>
<h2>This is linear gradient with Right to Left
linear transition</h2>
<div id="l3"></div>
<h2>This is linear gradient with 40 deg
linear transition</h2>
<div id="gradangl"></div>
</body>
</html> Output:-
The syntax used for radial gradient in CSS are:-
background-image: radial-gradient(shape/size 'at' position,
color1, color2, color3...)Example:- Here is the following example to understand the radial gradient scheme.
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of radial Gradient</title>
<style type="text/css">
#r
{
height: 100px;
width: 100px;
background-image: radial-gradient(yellow, green, red);
}
#r1
{
height: 100px;
width: 100px;
background-image: radial-gradient(yellow 5%, green 10%, red 20%);
}
#r2
{
height: 100px;
width: 100px;
background-image: radial-gradient(closest-corner at 50% 70%,
green, blue, yellow);
}
#rCir
{
height: 100px;
width: 100px;
background-image: radial-gradient(circle, green, yellow, orange);
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<h2>This is default radial gradient:</h2>
<div id="r"></div>
<h2>This is radial gradient with color quotients defined:</h2>
<div id="r1"></div>
<h2>This is radial gradient with direction and position defined:
</h2>
<div id="r2"></div>
<h2>This is radial gradient in circular shape:</h2>
<div id="rCir"></div>
</body>
</html> Output:-
Linear Gradient for diagonal transitions using Multiple Colors are:-
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Linear Gradient for diagonal
transitions using Multiple Colors </title>
<style type="text/css">
#linergrad{
height: 100px;
width: 400px;
background-image: linear-gradient(to left bottom,
skyblue,lightgrey, green, pink, orange, white);
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div id="linergrad"></div>
</body>
</html> Output:-