CSS gradient
When you need transition between two or more colors without using images, the CSS gradient property come into action. The CSS gradient property allows you to create a gradient from one color to another color without using images.
The CSS gradient provides a facility to generate smooth transition between two or more colors. In earlier times, this was achieved with the help of images. The gradient elements can be scaled up or scaled down without compromising color quality.
There are two types of gradient:
- Linear gradients
- Radial gradients
Linear gradients
Linear gradients are created when you define at least two color stops. However, you can create more complex gradient effects with the help of more color stops.
Color stops are the colors you want to render smooth transitions among. The basic syntax of the linear gradient is given below:
linear-gradient(direction, color-stop1, color-stop2….)
Linear gradient can be applied in different ways:
Top to bottom direction
This is the default direction for linear gradient. It starts from the top to bottom. The first color scatters from the top and the next color scatters towards bottom. Let us apply top to bottom gradient to background-image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded border property</title>
<style>
.container{
border:3px solid rgb(94, 255, 0);
height:150px;
width:500px;
}
div#onevalue{
background-image:linear-gradient(red, pink);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Top to bottom gradient</p></b>
</div>
</body>
</html>
Left to right direction
It starts from left and goes toward right or starts from right side and goes toward left. The first color scatters from the left side with next color scatters towards right and vice-versa. Let us apply gradient towards right side as a background-image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:150px;
width:500px;
}
div#onevalue{
background-image:linear-gradient(to right, red, pink);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Left to right gradient</p></b>
</div>
</body>
</html>
Diagonal direction
You can also set gradient along the diagonal direction. It starts from left top corner and goes towards bottom right corner. Let us take an example of diagonal gradient with three colors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:150px;
width:500px;
}
div#onevalue{
background-image:linear-gradient(to bottom right, red, pink, yellow);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Diagonal gradient</p></b>
</div>
</body>
</html>
Linear gradient using angle
You can also set a linear gradient with the help of angle instead of setting direction. The angle 0 deg creates a bottom to top gradient, and positive angles represent clockwise rotation, that means the angle 90 deg creates a left to right gradient.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:150px;
width:500px;
}
div#onevalue{
background-image:linear-gradient(40deg, red, pink, yellow);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Angular gradient</p></b>
</div>
</body>
</html>
Linear gradient with transparency property
CSS gradients also support transparency, which can be used to create fading effects. To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color. 0 indicates full transparency, 1 indicates full color or full opacity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:150px;
width:500px;
}
div#onevalue{
background-image:linear-gradient(to right, rgba(12, 88, 5, 0.3), rgb(12, 88, 5, 1));
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Gradient with transparency</p></b>
</div>
</body>
</html>
Rainbow creation with linear gradient
After studying the above gradients, we are now in a state to create rainbow with the use of gradient. Let us write a code of rainbow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:500px;
width:200px;
}
div#onevalue{
background-image:linear-gradient(to top, violet,indigo, blue,green, yellow, orange, red);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Rainbow with gradient</p></b>
</div>
</body>
</html>
Repeating gradient in CSS
Till now the gradients are created without repeating color stop. If you want to repeat gradient in your web page, then use repeating gradient property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:200px;
width:500px;
}
div#onevalue{
background-image:repeating-linear-gradient(orange, red 10%,yellow 20%);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Repeating gradient</p></b>
</div>
</body>
</html>
Radial gradient in CSS
We have seen linear gradients spread color linearly (top to bottom or from left to right or diagonally). But, if you want to spread color starting from a single point and spread outward in a circular or elliptical form, then you can use radial gradient. In a radial gradient color emerge from a single point and smoothly spread outward in a circular or elliptical shape rather than fading from one color to another in a single direction as with linear gradients. The basic syntax of radial gradient is given below:
radial-gradient(shape size at position, color-stop1, color-stop2, …);
The radial gradient-by default takes, shape as ellipse, size as farthest-corner, and position as center. There are different types of radial gradient which you can use in your code:
Evenly spaced radial gradient
In evenly spaced gradient, the colors scatter by following evenly spaced structure. Let us understand this concept with the help of example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:300px;
width:300px;
}
div#onevalue{
background-image:radial-gradient(orange, red,yellow);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Evenly spaced Radial gradient</p></b>
</div>
</body>
</html>
Differently spaced radial gradient
In differently spaced radial gradients, we use colors with different percentage value to make its range unique. Let us write a code of differently spaced radial gradients:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:300px;
width:300px;
}
div#onevalue{
background-image:radial-gradient( orange 10%, red 20%, yellow 30%, green 40% );
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Differently spaced Radial gradient</p></b>
</div>
</body>
</html>
Setting shape in radial gradient
The shape argument of radial gradient function allows you to define shape of the gradient. It takes the shape as circle or ellipse. Lets have an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:300px;
width:600px;
}
div#onevalue{
background-image:radial-gradient(ellipse, orange, red, yellow);
}
</style>
</head>
<body>
<div class="container" id="onevalue">
<b><p>Radial gradient with ellipse shape</p></b>
</div>
</body>
</html>
Setting different size in css
The size parameter defines the size of gradient. It takes four values as closest-side, farthest-side, closest corner and farthest corner. Let us write a combined code for these four values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:150px;
width:400px;
}
div#first{
background-image: radial-gradient(closest-corner at 70% 50%, red, yellow,pink);
}
div#second{
background-image: radial-gradient(farthest-corner at 40% 50%, red, yellow, pink);
}
div#third{
background-image: radial-gradient(closest-side at 40% 50%, red, yellow, pink);
}
div#fourth{
background-image: radial-gradient(farthest-side at 60% 50%, red, yellow, pink);
}
</style>
</head>
<body>
<div class="container" id="first">
<b><p id="pos1">Closest-corner radial gradient with ellipse shape</p></b>
</div>
<div class="container" id="second">
<b><p id="pos2">Farthest-corner radial gradient with ellipse shape</p></b>
</div>
<div class="container" id="third">
<b><p id="pos3">Closest-side radial gradient with ellipse shape</p></b>
</div>
<div class="container" id="fourth">
<b><p id="pos4">Farthest-side radial gradient with ellipse shape</p></b>
</div>
</body>
</html>
Repeating radial gradient in CSS
Like repeating linear gradient property, radial gradient also provides the functionality of repeating radial gradient. Let us take an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient property</title>
<style>
.container{
height:300px;
width:300px;
}
div#first{
background-image: repeating-radial-gradient( red, yellow 10%,pink 10%);
}
</style>
</head>
<body>
<div class="container" id="first">
<b><p id="pos1">Repeating radial gradient</p></b>
</div>
</body>
</html>
Note: To practice these codes, Please copy these codes one by one and paste in notepad,save it as filename.html and finally open with browser.
