How to make a gradient fill

The project: Tabs

With CSS you can make three types of gradients. Those are:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)

This example shows the use of a box with a border. Both having a gradient fill, but opposite each other, for the effect it gives.
The second example shows you the use of three colors. I have though used them as you see in the example, as I think it looks better simply.
The third example is made using five colors.

The https://dev.webpages.dk/ contains a collection on small snippets in the main web developing languages.
These are; HTML, CSS, Javascript and PHP.
This site is a new remake of the old site, and some of the snippets are from the old site just all in a new design.
A lot of snippets have been added since that last version of the webpages.
I hope that you will find this site a positive experience.

HTML

Notice that there are two 'class' values in the <div class="border fill">
Just separate them with a space only, that way you can use more style code in one go.


<div class="border fill">
The https://dev.webpages.dk/ contains a collection on small snippets
in the main web developing languages.
These are; HTML, CSS, Javascript and PHP.
This site is a new remake of the old site,
and some of the snippets are from the old site just all in a new design.
A lot of snippets have been added since that last version of the webpages.
I hope that you will find this site a positive experience.
</DIV>


<div class="fillthree">
The https://dev.webpages.dk/ contains a collection on small snippets
in the main web developing languages.
These are; HTML, CSS, Javascript and PHP.
This site is a new remake of the old site,
and some of the snippets are from the old site just all in a new design.
A lot of snippets have been added since that last version of the webpages.
I hope that you will find this site a positive experience.
</DIV>


<div class="fillfive">
The https://dev.webpages.dk/ contains a collection on small snippets
in the main web developing languages.
These are; HTML, CSS, Javascript and PHP.
This site is a new remake of the old site,
and some of the snippets are from the old site just all in a new design.
A lot of snippets have been added since that last version of the webpages.
I hope that you will find this site a positive experience.
</DIV>

CSS

Notice that you can have the gradient going from all four sides; top, right, bottom, and left.
Just do like so; border-image: linear-gradient(to bottom, red, yellow);
This will show the red color coming from the top, and fading to yellow at the bottom.


.border {
    width: 400px;
    border: 6px solid transparent;
    border-image: linear-gradient(to right, yellow, red);
    border-image-slice: 1;
}
.fill {
    padding: 28px;
    width: 400px;
    background-image: linear-gradient(to right, red, yellow);
    background-image-slice: 1;
}
.fillthree {
    padding: 28px;
    width: 400px;
    background-image: linear-gradient(to right, red, yellow, red);
    background-image-slice: 1;
}
.fillfive {
    margin-left:64px;
    padding: 28px;
    width: 400px;
    background-image: linear-gradient(to right, red, yellow, white, green, black);
    background-image-slice: 1;
}