• Post category:CSS

What is Linear Gradient in CSS and How to Use it | Explained

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 :

  1. to left, to right, to top, to bottom,
  2. to top left, to top right, to bottom left, to bottom right is used for create diagonal gradients
  3. 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:

what is linear gradient in css

  1. In the above code, we have three div tags with different classname like “left”, “topyright”, and “deg”.
  2. 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.
  3. 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.
  4. 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%”.

Leave a Reply