CSS3 Tutorial: Gradients Color

by Ridwan Fadilah on May 30, 2020 CSS3 Tutorial: Gradients Color

A simple way CSS3 gradients color usage to make your page look more stylish

I'm sure you are so familiar and often hear about the gradient color. Some people also know the gradient as a color transition. You can also apply the gradient colors into the elements on your web page by using CSS3.

Before we start to learn about the CSS3 Gradients, you should know, there are two types of gradient colors. The first is linear-gradient, and the second is radial-gradient. Linear or radial gradient is not a CSS3 property, but that is a value for the background-image property.

Now, in this tutorial, you'll learn about How to use CSS3 Gradient Colors value into the elements of your web page. Let's Begin!


CSS Linear Gradient

To create a linear-gradient, you must define at least two different color values. You can also use a color stop to specify the proportion of the color to render smooth transitions among as do you want.

You can use this following syntax to create a linear-gradient:

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

You can set a starting point, direction, or angle along with the gradient effect. By default, the starting point of the CSS3 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;
    }

    .linear-grad {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        background-image: linear-gradient(blue, lightblue);
    }

Result:

CSS3 Tutorial: Gradients Color - Example 1

You can also use the RGB, HSL, or Hexadecimal color values with or without alpha.

Example:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS Gradients</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <div class="linear-grad-2">
            <section>
                <p>Linear Gradient - Top to Bottom (this is default)</p>
                <p>This is a linear-gradient with the color name, RGBA, and Hexadecimal.</p>
            </section>
        </div>

    </body>

    </html>

- CSS

    section {
        margin: auto;
        color: white;
    }

    .linear-grad-2 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        background-image: linear-gradient(blue, rgb(7, 136, 179, 1), #bbb4ff);
    }

Result:

CSS3 Tutorial: Gradients Color - Example 2


Here's another example of CSS3 linear-gradient by set the starting point:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS Gradients</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <div class="linear-grad-3">
            <section>
                <p>Linear Gradient - Left to Right</p>
            </section>
        </div>

        <div class="linear-grad-4">
            <section>
                <p>Linear Gradient - Diagonal</p>
            </section>
        </div>

        <div class="linear-grad-5">
            <section>
                <p>Linear Gradient - Using Angle</p>
            </section>
        </div>

    </body>

    </html>

- CSS

    section {
        margin: auto;
        color: white;
    }

    .linear-grad-2 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        background-image: linear-gradient(blue, rgb(7, 136, 179, 1), #bbb4ff);
    }

Result:

CSS3 Tutorial: Gradients Color - Example 3

Here's another example of CSS3 linear-gradient by set the starting point:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS Gradients</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <div class="linear-grad-3">
            <section>
                <p>Linear Gradient - Left to Right</p>
            </section>
        </div>

        <div class="linear-grad-4">
            <section>
                <p>Linear Gradient - Diagonal</p>
            </section>
        </div>

        <div class="linear-grad-5">
            <section>
                <p>Linear Gradient - Using Angle</p>
            </section>
        </div>

    </body>

    </html>

- CSS

    section {
        margin: auto;
        color: white;
    }

    .radial-grad {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        background-image: radial-gradient(blue, lightblue);
    }

Result:

CSS3 Tutorial: Gradients Color - Example 4

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

Example:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS Gradients</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <div class="radial-grad-2">
            <section>
                <p>Radial Gradient - Differently Spaced Color Stops</p>
            </section>
        </div>

    </body>

    </html>

- CSS

    section {
        margin: auto;
        color: white;
    }

    .radial-grad-2 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        background-image: radial-gradient(blue 30%, rgb(7, 136, 179, 1) 70%);
    }

Result:

CSS3 Tutorial: Gradients Color -  Example 5

You can also use the shape parameter to define the shape:

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>CSS Gradients</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <div class="radial-grad-3">
            <section>
                <p>Radial Gradient - Set Shape</p>
            </section>
        </div>

    </body>

    </html>

- CSS 

    section {
        margin: auto;
        color: white;
    }

    .radial-grad-3 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        height: 200px;
        background-image: radial-gradient(circle, blue 30%, rgb(7, 136, 179, 1) 70%);
    }

Result:

CSS3 Tutorial: Gradients Color - Example 6

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="radial-grad-4">
            <section>
                <p>Radial Gradient - closest-side</p>
            </section>
        </div>

        <br>

        <div class="radial-grad-5">
            <section>
                <p>Radial Gradient - farthest-side</p>
            </section>
        </div>

        <br>

        <div class="radial-grad-6">
            <section>
                <p>Radial Gradient - closest-corner</p>
            </section>
        </div>

        <br>

        <div class="radial-grad-7">
            <section>
                <p>Radial Gradient - farthest-corner</p>
            </section>
        </div>

    </body>

    </html>

- CSS

    section {
        margin: auto;
        color: white;
    }

    .radial-grad-4 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        height: 100px;
        background-image: radial-gradient(closest-side at 30% 70%, green, rgb(70, 240, 107));
    }

    .radial-grad-5 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        height: 100px;
        background-image: radial-gradient(farthest-side at 70% 30%, green, rgb(70, 240, 107));
    }

    .radial-grad-6 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        height: 100px;
        background-image: radial-gradient(closest-corner at 55% 70%, green, rgb(70, 240, 107));
    }

    .radial-grad-7 {
        display: flex;
        margin: auto;
        padding: 25px;
        max-width: 50%;
        height: 100px;
        background-image: radial-gradient(farthest-corner at 70% 55%, green, rgb(70, 240, 107));
    }

Result:

CSS3 Tutorial: Gradients Color - Example 7

Ok, the tutorial about CSS3 Gradients has finished. That's just a basic of CSS3 Gradient usage. If you want to learn more about the CSS3 tutorial, you can find that in the next chapter.

You can also find the full source code of these examples on our GitHub.

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thanks!

Loading…