Ich werde immer wieder gefragt, wie man denn einen Hintergrund erstellen kann. Entweder soll der Hintergrund Einfarbig sein oder einen Farbverlauf haben.

Eigentlich ist es überraschend einfach sowas zu machen, da es wirklich nur 1 Befehl ist den man austauschen kann. Viel CSS braucht man wirklich nicht, ausser um den Background und ihre Grösse zu definieren.

Video

CSS

Mit diesem einfachen Code hat man dann einen einfachen einfarbigen Hintergrund definiert. Entweder gibt man die Farbe als HEX Code ein #16A8DF oder als Farbcode Green. Beides funktioniert wunderbar.

1
2
3
4
5
6
7
8
9

body {
padding:0;
margin:0;
 
width: 100%;
height: 100vh
 
background-color #16A8DF;
}

Wenn man einen Farbverlauf haben möchte, kann man einfach den folgenden Befehl einfügen

1

radial-gradient(farbe1, farbe2)

Ihr müsst einfach die farbe1 und farbe2 mit eurem gewünschten Farbcode (HEX Format) eingeben. farbe1 ist die Farbe in der Mitte und die farbe2 ist für die Farbe im äusseren Bereich.

1
2
3
4
5
6
7
8
9

body {
padding:0;
margin:0;
 
width: 100%;
height: 100vh
 
background-color: radial-gradient(#fff, #a81010);
}

Ihr seht ihr könnt nun sehr einfach mit den Farben rumspielen und so eure Resultate anpassen.