html

Linear Gradients in CSS Explained

An effect which creates a smooth transition from one color to another is referred to as a gradient. CSS helps in creating various kinds of gradients such as linear, radial, and conic. The linear gradients present transitional effects in a single direction whereas the radial and conic have non-linear transzonal effects. This article provides a descriptive guide on linear gradients with the following learning outcomes:

How to create linear gradients in CSS

The linear gradients can be created by using the syntax provided below.

background-image: linear-gradient(direction, color1<angle>, color2<angle>, ...);

It is observed from the syntax that the linear-gradient() function depends on the direction parameter and the colors being used.

The direction parameter defines the starting point and accepts the following values:

  • “to top” or “0deg”: starts from the bottom towards the top
  • “to right” or “90deg”: gradient starts from left towards the right side
  • “to bottom” or “180deg”: from top to bottom
  • “to left” or “270deg”: starts from the right side towards the left side

The above-stated parameters have equivalency with the angles. Like, you can define the starting of the gradient with the help of angles as well. The equivalency of angles and sides is described as: “to top”=”0deg”, “to right”=”90deg”, “to bottom”=”180deg”, and “to left”=”270deg”.

Example 1: Linear gradient with default parameters

To practice the linear-gradient at a basic level, we have used the following code.

HTML

<div>

  <h1> Linear Gradient </h1>

</div>

CSS

<style>

  div {

  height:250px;

    background-image: linear-gradient(green, red);

}

</style>

In the above code, the direction parameter of the linear-gradient function is set to the default value. Where the gradient would start from the green color and will transition towards the red color.

Output

From the output, it is observed that the default direction of the linear-gradient function is from top to bottom.

Example 2: a customized linear gradient

This example demonstrates the creation of a gradient with custom values of direction and color angles.

HTML

<div>

  <h1> Linear Gradient </h1>

</div>

CSS

<style>

  div {

  height:250px;

  background-image: linear-gradient(to right, green 10%, red 50%);

}

</style>

The above CSS code is described as,

  • to right: shows the direction of gradient from left to right
  • green 10%: shows that the transitioning effect will start from 10% of the whole length of the gradient
  • red 50%: this shows that the transitioning effect will go up to 50% of the length of the gradient

Output

The output shows that the solid green continues up to the 10% length. The transitioning starts from 10% and continues until 50% of the length. After 50% the solid red color starts which will end with the length of the gradient.

Example 3: a repetitive linear gradient

The repeating-linear-gradient() function can be used to create a repetitive gradient.

HTML

<div>

  <h1> A Repeating Linear Gradient </h1>

</div>

CSS

<style>

  div {

  height:250px;

  background-image: repeating-linear-gradient(90deg, red, green 5%, lightseagreen 10%);

}

</style>

The above CSS code is described as,

  • the direction would be left to right as the angle is 90deg
  • the gradient would start from red followed by green, and light sea green. These colors will be repeated until the length of the gradient ends

Note: You have to define the percentage with at least the last color. Otherwise, the pattern will not repeat.

Output

The above output shows that the gradient with red, green, and lightseagreen colors is being repeated several times till the whole length of the gradient.

Conclusion

A linear gradient in CSS can be created by using the linear gradient() function of CSS. This function accepts multiple parameters that define the direction of the gradient and the color being used. This article provides a descriptive guide on linear gradients in CSS. By following this post, you would be able to get the basic concept of linear gradients in CSS with examples demonstrating the creation of linear gradients in CSS. Moreover, a repeating-linear-gradient() function can be exercised to create a repetitive gradient.

About the author

Adnan Shabbir