Definition of CSS Linear Gradient
Gradients are image data type CSS elements that represent a transition between two or more colors. As with every gradient, there are no inherent dimensions to a linear gradient; i.e., there is no normal or desired size, nor a recommended ratio. The concrete size matches the size of the element to which it relates.
The linear-gradient() function creates a sequence of colored lines adjacent to the gradient line to obtain a smooth gradient, that matches the color of the point in which it connects the gradient line. You can create an extremely customizable transition between various colors by including more color-stop points upon this gradient line.
Syntax and Parameters
The syntax for appearance property can be written as shown below:
background-image: linear-gradient(direction, color1, color2, ......);
The syntax includes the following parameters:
- direction: This represents a starting point and direction together with the gradient effect.
- color1, color2…: This parameter defines color values, preceded by an additional stop position which is a number between 0 and 100% or a length along the gradient axis.
For instance,
.myclass {
background-image: linear-gradient (to left, green, blue);
}
Here, the linear gradient will add the color from the right by starting with the green color and transitioning to blue color. Moving towards the left side represents the direction parameter and green & blue colors specify the number of colors applied for the element.
How CSS Linear Gradient Property Work in CSS?
The gradient line is specified by an angle and by the center of the box containing the gradient image. The gradient colors are described by two or three points: the starting point, the ending point, and optional color-stop points in between.
4.5 (8,706 ratings)
View Course
The initial step is the position on the line of gradients where the first color starts. The endpoint is the ending point of the last color. The intersection of the gradient line with a perpendicular line coming from the box corner which is in the same quadrant represents one of these two points.
Examples of CSS Linear Gradient
Now, we will see some of the examples to describe the usage of linear-gradient property in CSS.
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Linear Gradient Example </title>
<style>
.gradient_class {
height: 80px;
background-color: green;
background-image: linear-gradient(coral, olive);
}
</style>
</head>
<body>
<h2> CSS Linear Gradient </h2>
<div class="gradient_class">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>
Output:
In the above example, we have used the content in the class called ‘.gradient_class’ which will be displayed with linear gradient property. Here, CSS will start from the top, where the coral color will be the starting color and makes the transitions into the olive color value.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Linear Gradient Example </title>
<style>
.gradient_class {
height: 80px;
background-color: green;
background-image: linear-gradient(to right, coral, olive);
}
</style>
</head>
<body>
<h2> CSS Linear Gradient </h2>
<div class="gradient_class">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>
Output:
The above example is quite similar to the previous example, but the only difference is that in this example we are using one more parameter. i.e. direction parameter. Here, we are displaying a gradient effect from left to right with the specified colors.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Linear Gradient Example </title>
<style>
.gradient_class {
height: 80px;
background-color: green;
background-image: linear-gradient(to right, coral 20%, olive 20%);
}
</style>
</head>
<body>
<h2> CSS Linear Gradient </h2>
<div class="gradient_class">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>
Output:
In the above example, we are using gradients to change the solid color from one color to another solid color directly. The gradient property moves from left to right with coral color from 20% and olive color from 20%. These are called as hard color stops to fade the colors. This will help to declare a full-height background replicating columns or stripes.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Linear Gradient Example </title>
<style>
.gradient_class {
height: 80px;
background-color: green;
background-image: linear-gradient(90deg, coral 0 50%, olive 50% 100%);
}
</style>
</head>
<body>
<h2> CSS Linear Gradient </h2>
<div class="gradient_class">
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully.
</div>
</body>
</html>
Output:
In the above example, we have used gradient at a 90-degree angle, with a coral bottom-left half and an olive top-right half, with a hard line where the gradient changes from coral to olive. The color-stop orientation can be defined explicitly by using a < percentage >.
Conclusion
So far, we have seen the working of linear-gradient property in CSS. Along with this, we have also seen a lot on creating linear gradients, its every part of the syntax, and browser compatibility. The browser support for linear gradients is solid. With help of the linear-gradient property, the user can insert multiple colors in div element from left, right, top, bottom, top left, top right, bottom left, bottom right, and many more. The colors generated by a gradient differ with position gradually, providing smooth color transformations.
Recommended Articles
This is a guide to CSS Linear Gradient. Here we also discuss the definition and how css linear-gradient property works in css? along with a different example and its code implementation. You may also have a look at the following articles to learn more –
