What is Linear Gradient in CSS
In this article, we will see what is linear gradient in CSS and how to use it.
Linear Gradient
It is used to create a background consisting of a transition between two or more colors along a straight line.
Syntax:
You can use the background property or background-image property or background color for applying linear-gradient color. To use linear gradient color first we need to write the keyword “linear-gradient”. In the parentheses first, we pass direction and then we pass one or more color stops as in the above syntax.
Background:linear-gradient(direction, color-stop 1, color-stop 2,......last-color-stop );
or
Background-image:linear-gradient(direction, color-stop 1, color-stop 2,......last-color-stop );
or
Background-color:linear-gradient(direction, color-stop 1, color-stop 2,......last-color-stop );Direction
It takes various values like :
- to left, to right, to top, to bottom,
- to top left, to top right, to bottom left, to bottom right is used for create diagonal gradients
- or you can give angle in degrees.
color-stop: color position
You can give color value to color name, hex color value, rgb(0 to 255, 0 to 255, 0 to 255), rgba(0 to 255, 0 to 255, 0 to 255, 0 to 1)
You can give position value to px or %
Example code
<html>
<head>
<style type="text/css">
*{
width: 30%;
height: 50px; }
.left{
background: linear-gradient(to left, red 0%, blue 100% ); }
.topright{
background: linear-gradient(to top right, green 0%, black 100% ); }
.deg{
background: linear-gradient(45deg, silver 0%, orange 100% ); }
</style>
</head>
<body>
<div class="left"> </div><br>
<div class="topright"> </div><br>
<div class="deg"> </div>
</body>
</html>Output:
- In the above code, we have three div tags with different classname like “left”, “topyright”, and “deg”.
- We have selected the “left” class in CSS using the class selector. Then we use the “background” property and give the value as “linear-gradient”. In the parentheses, the direction is set to “to left”. Here we use two color-stops, the color value in the color name and position value in percentage (%) are given. The first color-stop is “red 0%” and another one is “blue 100%”. Similarly, we can use the “to right”, “to top”, and “to bottom” directions.
- Then we selected the “topright” class in CSS using the class selector. In linear-gradient parentheses, the direction is set to be “to top right”. Here we use two color-stop, The first color-stop is “green 0%” and another one is “black 100%”. Similarly, we can use the “to top left”, “to the bottom left”, and “to bottom right” directions.
- And then we selected the “deg” class in CSS using the class selector. In linear-gradient parentheses, the direction is set to be “45deg”. In the above code, we use two color-stops, the color value in the color name and the position value in percentage (%) is given. The first color-stop is silver 0%” and another one is “blue 100%”.
