How to Use CSS Gradient Colors

In this article, we will see how to use gradient colors using css, there types, examples with there code & result. Also you’ll learn about How to use CSS Gradient Colors value into the elements of your web page.

Published in

The Startup

8 min readSep 25, 2020

CSS gradients let you display smooth transitions between two or more specified colors. With the use of gradient colors we can change look of whole web page. A simple way CSS gradients color usage to make your page look more stylish.

Before we start to learn about the CSS Gradients, you should know, there are two types of gradient colors.

- Linear Gradients (goes down/up/left/right/diagonally)

- Radial Gradients (defined by their center)

Linear or radial gradient is not a CSS property, but that is a value for the background-image property.Let’s Begin.

CSS Linear Gradient

To create a linear-gradient, We will need to define at least two different color values. We may use a color stop to specify the proportion of the color to render smooth transitions among per need.

We will use the following syntax to create a linear-gradient:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

We have to set a starting point, direction, or angle along with the gradient effect. By default, the starting point of the CSS linear-gradient is top to bottom.

To make it easier to understand, let’s implement it by example.

Example:

HTML

<!DOCTYPE html>
  <html lang="en">
 
  <head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
  </head>
 
  <body>
 
    <div class="linear-grad">
      <section>
        <p>Linear Gradient - Top to Bottom (this is default)</p>
        <p>You don't need to set the starting point</p>
      </section>
    </div>
 
  </body>
  </html>

CSS

section {
    margin: auto;
    color: white;
}
.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.linear-grad {
    background-image: linear-gradient(rgb(143, 25, 44), rgb(78, 147, 170));
}

Result:

This is simple default Top-to-Bottom Linear Gradient example, Let’s see different linear gradient examples:

More Examples of Linear Gradient

Below is the detail explained Examples as:

In this detail example you will get clear idea of linear gradient as it explains three properties in single Example:

Linear Gradient — Left to Right

linear gradient that starts from the left to right

Linear Gradient — Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

Example:

HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad linear-grad-2">
        <section>
            <p>Linear Gradient - Left to Right</p>
        </section>
    </div>
    <div class="grad linear-grad-3">
        <section>
            <p>Linear Gradient - Diagonal</p>
        </section>
    </div>
    <div class="grad linear-grad-4">
        <section>
            <p>Linear Gradient - Using Angle</p>
        </section>
    </div>
</body>
</html>

CSS

section {
    margin: auto;
    color: white;
}.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.linear-grad-2 {
    background-image: linear-gradient(to right, rgb(143, 25, 44), rgb(7, 136, 179, 1));
  }.linear-grad-3 {
   background-image: linear-gradient(to bottom right, rgb(143, 25, 44), rgb(7, 136, 179, 1), #bbb4ff);
  }.linear-grad-4 {
   background-image: linear-gradient(-90deg, rgb(143, 25, 44), rgb(7, 136, 179, 1), #bbb4ff);
  }

Result:

Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple color stops and second example shows how to create a linear gradient (from left to right) with the color of the rainbow and some text

HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad linear-grad-multicolor-1">
        <section>
          <p>Linear Gradient - Multicolor(top-to-bottom)</p>
        </section>
      </div>
      
      <div class="grad linear-grad-multicolor-2">
        <section>
          <p>Linear Gradient - Multicolor(left-to-right)</p>
        </section>
      </div>
</body>
</html>

CSS

.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.linear-grad-multicolor-1 {
    background-image: linear-gradient(rgb(143, 25, 44), rgb(7, 136, 179, 1), rgb(70, 240, 107));
}.linear-grad-multicolor-2 {
     background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);;
}

Result:

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad linear-grad-repeat">
        <section>
            <p>Linear Gradient - Repeat</p>
        </section>
    </div>
</body>
</html>

CSS

section {
    margin: auto;
    color: white;
}.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.linear-grad-repeat {
    background-image: repeating-linear-gradient( rgb(143, 25, 44), rgb(127, 179, 7) 10%, green 15%);
}

Result:

You can also use a different color stops to specify the proportion of the color by adding a percentage or pixel.

Radial Gradients

Example:

Now we will move to Radial Gradient Effects. There is difference in linear gradient and radial gradient.

Let’s check

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Example:

Now we will move to Radial Gradient Effects. There is difference in linear gradient and radial gradient.

Let’s check

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.

Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Example

Radial Gradient — Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad radial-grad-1">
        <section>
            <p>Radial Gradient - Evenly Spaced Color Stops (this is default)</p>
        </section>
    </div>
</body>
</html>

CSS

section {
    margin: auto;
    color: white;
}.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.radial-grad-1 {
    background-image: radial-gradient(rgb(143, 25, 44), rgb(7, 136, 179, 1));
}

Result:

Radial Gradient — Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops: HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad radial-grad-2">
        <section>
            <p>Radial Gradient - Differently Spaced Color Stops</p>
        </section>
    </div>
</body>
</html>

CSS

section {
    margin: auto;
    color: white;
}.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.radial-grad-2 {
    background-image: radial-gradient(rgb(143, 25, 44) 30%, rgb(7, 136, 179, 1) 70%);
}

Result:

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad radial-grad-3">
        <section>
            <p>Radial Gradient - Set Shape</p>
        </section>
    </div>
</body>
</html>

CSS

section {
    margin: auto;
    color: white;
}.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.radial-grad-3 {
    background-image: radial-gradient(circle, rgb(143, 25, 44) 30%, rgb(7, 136, 179, 1) 70%);
}

Result:

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

Here’s a different size keyword that could be used on CSS3 radial-gradient:

· closest-side

· farthest-side

· closest-corner

· farthest-corner

Example:

HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad radial-grad-4">
        <section>
            <p>Radial Gradient - closest-side</p>
        </section>
    </div>
    <div class="grad radial-grad-5">
        <section>
            <p>Radial Gradient - farthest-side</p>
        </section>
    </div>
    <div class="grad radial-grad-6">
        <section>
            <p>Radial Gradient - closest-corner</p>
        </section>
    </div>
    <div class="grad radial-grad-7">
        <section>
            <p>Radial Gradient - farthest-corner</p>
        </section>
    </div>
</body>
</html>

CSS

section {
    margin: auto;
    color: white;
}.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.radial-grad-4 {
    background-image: radial-gradient(closest-side at 30% 70%, rgb(143, 25, 44), rgb(70, 240, 107));
}
.radial-grad-5 {
  background-image: radial-gradient(farthest-side at 70% 30%, rgb(143, 25, 44), rgb(70, 240, 107));
}.radial-grad-6 {
  background-image: radial-gradient(closest-corner at 55% 70%, rgb(143, 25, 44), rgb(70, 240, 107));
}.radial-grad-7 {
  background-image: radial-gradient(farthest-corner at 70% 55%, rgb(143, 25, 44), rgb(70, 240, 107));
}

The repeating-radial-gradient() function is used to repeat radial gradients:

HTML

<!DOCTYPE html>
<html lang="en"><head>
    <title>CSS Gradients</title>
    <link rel="stylesheet" href="style.css">
</head><body>
    <div class="grad radial-grad-repeat">
        <section>
            <p>Radial Gradient - Repeat</p>
        </section>
    </div>
</body>
</html>

CSS

section {
    margin: auto;
    color: white;
}.grad {
    display: flex;
    margin: 20px auto;
    padding: 25px;
    max-width: 50%;
    height: 100px;
    box-shadow: 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}.radial-grad-repeat {
    background-image: repeating-radial-gradient( rgb(143, 25, 44), rgb(127, 179, 7) 10%, green 15%);
}

Result

Okay done, This is how this article has been finished we had seen types of css gradient, All properties that we can use with linear and radial gradient. If you have any queries comment below.

Here’s the code of above article GitHub.

There is third type of css gradients i.e. Conic Gradients

Keep Reading.

How to Use CSS Gradient Colors

In this article, we will see how to use gradient colors using css, there types, examples with there code & result. Also you’ll learn about How to use CSS Gradient Colors value into the elements of your web page.

CSS Linear Gradient

Radial Gradients

Radial Gradient — Differently Spaced Color Stops

Set Shape

Use of Different Size Keywords

Example:

The repeating-radial-gradient() function is used to repeat radial gradients:

Written by Prachi Thakur