CSS: 🌈 Farbverlauf erstellen – So gehts

Ein Farbverlauf lässt sich mit CSS relativ einfach darstellen. Farbverläufe sehen nicht nur gut aus, sondern eignen sich auch perfekt als Hintergründe oder sonstige Webseiten Verschönerungen.

Farbverläufe werden in CSS mit background-image: linear-gradient() erstellt

Beispiel1 : CSS Farbverlauf von oben nach unten

zuerst erstellen wir einen Container in dem wir verschiedene Farbverläufe testen können

<style>

.box{
width: 400px;
height: 400px;
background-image: linear-gradient(blue, black);

}
</style>


<div class="box" ></div>

Ergebnis

Unser erster Farbverlauf geht von blau nach schwarz und sieht dann so aus

Beispiel2 : CSS Farbverlauf von links nach rechts

Wenn du den CSS Code in folgende Zeile ersetzt geht der Farbverlauf von links nach rechts

background-image: linear-gradient(to right,blue, black);

Ergebnis

Beispiel2 : CSS Farbverlauf nach rechts unten

Ebenfalls können wir einen Farbverlauf nach rechts unten erstellen. Der Befehl ist dafür to right bottom. Auch hier benötigen wir wieder das to Attribut

background-image: linear-gradient(to right bottom, blue, black);

Ergebnis

Beispiel2 : CSS Farbverlauf in einem Beliebigen Winkel

Oft ist es notwendig den Farbverlauf in einem fest definierten Winkel zu erstellen. Dafür kannst du direkt die Grad in deg (degree) eingeben. Hier ein Beispiel.

background-image: linear-gradient(20deg, blue, black);

Ergebnis

Beispiel2 : Farbverlauf in Prozent verteilen

Ebenfalls hast du die Möglichkeit den Farbverlaub in Prozent % zu verteilen. In einem weitern Beispiel sieht das dann so aus

background-image: linear-gradient(blue 90%, black);

Ergebnis

Das Selbe kann man auch mit mehreren Farben gleichzeitig machen

background-image: linear-gradient(pink 10%, yellow 20%, red 70%);

Farbverlauf : für Chrome, Safari, Internet Explorer kompatibel machen

Damit dein Farbverlauf auch in anderen Browsern richtig angezeigt wird musst nur zu den folgenden Beispielen noch. Folgende CSS Zeilen hinzufügen.

Jeder Browser hat unterschiedliche begriffe für den linear-gradient

background-image: -webkit-linear-gradient(blue, black);
background-image: -moz-linear-gradient(blue, black);
background-image: -ms-linear-gradient(blue, black);
background-image: -o-linear-gradient(blue, black);
background-image: linear-gradient(blue, black);

Beispiel für unseren Farbverlauf von links nach rechts

Dieser Code wäre jetzt für andere Browser wie Google Crome, Safari, Firefox und den Internet Explorer kompatibel

background-image: -webkit-linear-gradient(to right,blue, black);
background-image: -moz-linear-gradient(to right,blue, black);
background-image: -ms-linear-gradient(to right,blue, black);
background-image: -o-linear-gradient(to right,blue, black);
background-image: linear-gradient(to right,blue, black);

Hat dir der Beitrag gefallen?

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien