https://dev.webpages.dk/  
 
About CSS gradient fill
How to use CSS 'gradient':

This is an example of using the CSS 'gradient'.
I show three examples here. The first uses two colors, from Red to Yellow, where the second goes from Red to Yellow to Red again.
The third shows five colors; red, yellow, white, green and black.

 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.

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.

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;
}
Icons made by Freepik from www.flaticon.com This example shows how you can make things with a gradient fill of colors. You can do it using two or several colors.
03:09:04